理解Flexbox弹性盒子

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档

1：要开始使用Flexbox，必须先让父元素变成一个Flex容器。

你可以在父元素中显式的设置

display:flex
或者 
display:inline-flex
。就这么的简单，这样你就可以开始使用Flexbox模块。

 

2.Flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction: row || column || row-reverse || column-reverse;

 

flex-wrap: wrap || nowrap || wrap-reverse;

 

flex-flow:

flex-flow
是 
flex-direction
和 
flex-wrap
两个属性的速记属性

你还记得使用

border
的速记写法？ 
border: 1px solid red
。这里的概念是相同的，多个值写在同一行，比如下面的示例： 

ul { flex-flow: row wrap; }

justify-content
属性可以接受下面五个值之一： 

ul {
justify-content: flex-start || flex-end || center || space-between || space-around }

align-items
属性类似于 
justify-content
属性。只有理解了 
justify-content
属性，才能更好的理解这个属性。 

align-items
属性可以接受这些属性值： 
flex-start || flex-end || center || stretch || baseline
。 

ul { align-items: flex-start || flex-end || center || stretch || baseline }

它主要用来控制Flex项目在Cross-Axis对齐方式。这也是

align-items
和 
justify-content
两个属性之间的不同之处。

align-content

还记得前面讨论的

wrap
属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。 

align-content
属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和 
align-items
值一样，但除了 
baseline
属性值。

像

align-items
属性一样，它的默认值是 
stretch
。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。

 

3.Flex项目属性

order || flex-grow || flex-shrink || flex-basis

flex-basis

记得前面我说过，Flex项目是当我没有的。但我们也可以控制。

flex-basis
属性可以指定Flex项目的初始大小。也就是 
flex-grow
和 
flex-shrink
属性调整它的大小以适应Flex容器之前。

前面介绍的是非常生要的，所以我们需要花一点时间来加强对他们的理解。

flex-basis
默认的值是 
auto
。 
flex-basis
可以取任何用于 
width
属性的任何值。比如  
% || em || rem || px
等。

注意：如果

flex-basis
属性的值是 
0
时，也需要使用单位。即 
flex-basis: 0px
不能写成 
flex-basis:0
。

默认情况，Flex项目的初始宽度由

flex-basis
的默认值决定，即：
flex-basis: auto
。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了
padding
值）。

flex速记

flex
是 
flex-grow
、 
flex-shrink
和 
flex-basis
三个属性的速记（简写）。

注意它们之间的顺序。

flex-grow
第一，然后是 
flex-shrink
，最后是 
flex-basis
。缩写成 GSB，可以帮助你更好的记忆。

如果

flex
属性值中少一个值，会发生什么呢？

如果你只设置了

flex-grow
和 
flex-shrink
值， 
flex-basis
可能是默认值
0
。这就是所谓的绝对flex项目。只有当你设置了
flex-basis
，你会得到一个相对flex项目。

flex: 0 1 auto

li { flex: 0 1 auto; }

这相当于写了

flex
默认属性值以及所有的Flex项目都是默认行为。

flex: 0 0 auto

li { flex: 0 0 auto; }

这个相当于

flex: none
。

还是老规矩：宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。伸展和收缩开关都被关掉了。

它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。

flex: 1 1 auto

这与 

flex: auto
 项目相同。

还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。

伸展和收缩开关打开了，宽度自动被计算。

flex: "positive number"

这里正数可以代表任何正数（没有引号）。这与 

flex: “正数” 1 0
 相同。 

flex: 2 1 0
 与写为  
flex: 2
 是一样的， 
2
 表示任何正数。 

li { flex: 2 1 0; / *与 flex: 2相同 */ }

与前面我立的规矩一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目。

弹性项目没有宽度，那么宽度该如何计算呢？

这个时候 

flex-grow
 值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题。

当有多个弹性项目，并且其初始宽度 

flex-basis
 被设置为基于零的任何值时，比如  
0px
，使用这种  
flex
 简写更实用。

实际发生的是，弹性项目的宽度被根据 

flex-grow
 值的比例来计算。

记住设置 

flex-grow : 1
，会让弹性项目填满可用空间。伸展开关打开了。

这里有两个弹性项目。一个的 

flex-grow
 属性值是  
1
，另一个是  
2
，那么会出现啥情况呢？

两个项目上的伸展开关都打开了。不过，伸展度是不同的，

1
 和  
2
。

二者都会填满可用空间，不过是按比例的。

它是这样工作的：前一个占 

1/3
 的可用空间，后一个占  
2/3
 的可用空间。

绝对和相对Flex项目

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据 

flex
 属性来计算，而不是内容。

绝对Flex项目的宽度只基于 

flex
 属性，而相对Flex项目的宽度基于内容大小。

align-self

align-self
 属性更进一步让我们更好地控制弹性项目。

你已经看到 

align-items
 属性是如何有助于整体对齐弹性容器内的所有弹性项目了。

如果想改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目，该怎么办呢？

这是 

align-self
 属性大展拳脚的地方了。

该属性的取值可以是这些值之一：

auto || flex-start || flex-end || center || baseline || stretch
。

Auto-margin 对齐

当在Flex项目上使用 

margin: auto
 时，值为 
auto
 的方向（左、右或者二者都是）会占据所有剩余空间。


解决嵌套中的flex容器的占用空间比例问题

一定有办法让所有这些放在一行，每个段落占据该行相等空间。用Flexbox来搞定！这里的概念与很多栅格系统中用的一样。

li { display: flex; /*段落现在显示在一行上*/ padding: 0 20px; /*留点呼吸空间*/ min-height: 50px; } li p { flex: 0 0 25%; /*这是甜面酱*/ }

看到段落会发生什么了吗？

flex: 0 0 25%;

“不要伸展或者收缩，不过每个段落应该占据 

25%
 的可用空间” 。段落所占空间是相等的。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/368845.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

php安装dat,PHP Parsing a .dat file

php安装dat,PHP Parsing a .dat file

问题I have a .dat file that is essentially ; delimited file and Im trying to convert it to a tab delimited .txt. The problem that I am not sure about is that each row of the new file will be a combination of 3 of the original files rows, each original row …
阅读更多...
[转]Bing Maps Tile System 学习

[转]Bing Maps Tile System 学习

原文链接：Bing Maps Tile System 学习 转载于:https://www.cnblogs.com/rainbow70626/p/8992322.html
阅读更多...
Spring休眠3

Spring休眠3

1.概述 本文将重点介绍通过Spring设置Hibernate 3 –我们将研究如何同时使用XML和Java配置通过Hibernate 3和MySQL设置Spring 3。 2. Hibernate 3的Java Spring配置 使用Spring和Java配置来设置Hibernate 3很简单： import java.util.Properties; import javax.sql…
阅读更多...
我们十组的cantool装置的使用

我们十组的cantool装置的使用

十组的cantool装置的使用 下图是连接好的示意图，灯亮。 如果在串口关闭的时候输入C，cantool装置就会报错，因为串口是关闭的。正如需求文档里写的，当串口关闭，输入C要有返回\BEL的,关闭串口的前提是串口打开。 正确发送…
阅读更多...
php查询功能突然没有用,php – 为什么搜索查询没有在PHRETS中显示任何结果？

php查询功能突然没有用,php – 为什么搜索查询没有在PHRETS中显示任何结果？

我正在使用这个PHP脚本从一个简单的搜索查询获得结果here我已经下载了属性here的元数据excel文件$rets_login_url "http://sef.rets.interealty.com/Login.asmx/Login";$rets_username "xxxxxxxx";$rets_password "xxxxxxxx";$rets_user_agen…
阅读更多...
es6入门

es6入门

现在我们来学习一下es6,它现在是一门比较火的语言但是并不是所有的浏览器都兼容E6说的全部特性， 但是我们依旧应该学习一下ES6的语法。 因为兼容性我们得学习一下Babel,它是一个广泛使用的ES6转换器，可以将ES6代码转化为ES5代码，从而在现有环…
阅读更多...
2018-05-05（在小程序中使用图标）

2018-05-05（在小程序中使用图标）

项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标&…
阅读更多...
Spring休眠4

Spring休眠4

1.概述 本文将重点介绍如何使用Spring设置Hibernate 4 –我们将研究如何使用Java和XML配置来使用Hibernate 4配置Spring 3。 当然，该过程的某些部分对于Hibernate 3文章是通用的 。 2. Maven 要将Spring Persistence依赖项添加到项目pom.xml中 ，请参阅专…
阅读更多...
php 水平测试,测试您的 PHP 水平的题目_PHP教程

php 水平测试,测试您的 PHP 水平的题目_PHP教程

在 Unix Review 上看到这个很有意思的测试，和大家共享。UnixReview.comMay 2007Test Your Knowledge of PHPby Emmett DulaneyFrom: http://www.unixreview.com/documents/s10130/ur0705d/Increasingly, PHP seems to be the tool/language that is used to make We…
阅读更多...
Django的模板系统

Django的模板系统

一、模板的组成 html代码和逻辑控制代码 二、逻辑控制代码的形式 1、变量（使用双大括号引用变量） a、template和context 语法 : {{ var_name }} 模板系统不仅可以传字符串，它可以传递任意对象，对于向列表、字典、元组等对象&…
阅读更多...
Java SE 7 Update 25 –发行说明进行了解释。

Java SE 7 Update 25 –发行说明进行了解释。

昨天是CPU日。 Oracle通过6月的Java重要补丁更新发布了Java SE更新25 。 在4月的最后一次重大更新之后，这是与所有其他Oracle产品一起不符合Oracle关键补丁更新计划的最后一个更新。 从2013年10月开始 ，Java安全修补程序将遵循四个年度安全发布周期。 但…
阅读更多...
springmvc mybatis 做分页sql 语句

springmvc mybatis 做分页sql 语句

<?xml version"1.0" encoding"UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace"ssmy.dao.UserDao"> <res…
阅读更多...
LeetCode Subarray Product Less Than K

LeetCode Subarray Product Less Than K

原题链接在这里&#xff1a;https://leetcode.com/problems/subarray-product-less-than-k/description/ 题目&#xff1a; Your are given an array of positive integers nums. Count and print the number of (contiguous) subarrays where the product of all the elements…
阅读更多...
Ansible: hosts文件拆分为inventory和定义inventory全局变量

Ansible: hosts文件拆分为inventory和定义inventory全局变量

前言 随着管理机器的增多&#xff0c;我们在使用Ansible的时候时常会遇到hosts文件过于冗长的问题&#xff0c;极其不便于管理&#xff0c;而将hosts文件拆分为inventory就可解决该问题&#xff1b;另外&#xff0c;hosts中的每个主机条目需要指定用户名和私钥或密码&#xff0…
阅读更多...
gulp实用配置（1）——demo

gulp实用配置（1）——demo

在React和Vue推进下&#xff0c;现在很多人都在使用webpack作为自动化构建工具&#xff0c;但其实在很多时候我们并不是一定需要用到它&#xff0c;gulp这样的轻量级构建工具就足够了。 最近一段时间不是太忙&#xff0c;所以就写了三份配置&#xff0c;用在不同的情况下。 这…
阅读更多...
使用Maven运行Solr

使用Maven运行Solr

使用Maven运行Solr Solr是一个开放源代码搜索服务器&#xff0c;它是使用Lucene Core的索引和搜索功能构建的&#xff0c;它可以用于使用几乎任何编程语言来实现可扩展的搜索引擎。 尽管Solr具有许多优点&#xff0c;但建立一个开发环境并不是其中之一。 该博客文章描述了如何…
阅读更多...
oracle11g日志原理,oracle11gRAC之log日志体系

oracle11g日志原理,oracle11gRAC之log日志体系

oracle11gRAC之log日志体系&#xff1a;1、CRS日志(grid)&#xff1a;首选查看alertlog&#xff1a;$CRS_HOME/grid/log/hostname/alertdbserver1.logClusterware后台进程日志&#xff1a;crsd.Log: $ORA_CRS_HOME/grid/log/hostname/crsd/crsd.Logocssd.Log: $ORA_CRS_HOME/gr…
阅读更多...
Eclipse中 如何实现 多行同时编辑

Eclipse中 如何实现 多行同时编辑

在编辑的时候按下 SHIFT ALT A 之后 鼠标变为 号 选择要同时编辑几行 即可编辑&#xff08;现在eclipse好像只能是编辑一块地方 不能像vs那样 任何地方可以同时编辑 这点很鸡肋&#xff09; 如图 退出编辑 再次 按 SHIFT ALT A 即可 转载于:https://www.cnblogs.com…
阅读更多...
AFN\HTTPS\UIWebView

AFN\HTTPS\UIWebView

1.AFN使用技巧 1.在开发的时候可以创建一个工具类&#xff0c;继承自我们的AFN中的请求管理者&#xff0c;再控制器中真正发请求的代码使用自己封装的工具类。 2.这样做的优点是以后如果修改了底层依赖的框架&#xff0c;那么我们修改这个工具类就可以了&#xff0c;而不用再一…
阅读更多...
检测和删除多余无用的css

检测和删除多余无用的css

本文主要讲解如何检测页面中多余无用的css。 1、chrome浏览器 F12审查元素的Audits 说明&#xff1a;使用Audits&#xff0c;会检测出页面中没有用到的css&#xff0c;需要手动删除多余的css&#xff1b;同时需要说明的是检测出多余无用的css块&#xff0c;而不是某一行css。 …
阅读更多...
最新文章

Copyright @ 2022~2023