精通css3 flex弹性布局

精通flex弹性布局

在远古时代，兼容ie6的年代使用float、position+display传统方式布局，经常会遇到一些奇奇怪怪的布局问题，所以在css3中的flex布局就营运而生，也就是弹性布局。

一、兼容性

目前为止已经有超过98%的浏览器已经全面支持flex布局(除非你的项目属于远古时代的项目)，所以基本都可以使用flex布局。

二、注意要点

如果使用了flex布局之后，容器中子元素中的以下属性会全部失效: float、clear和vertical-align；
如图，没有flex之前：

使用flex之后：

三、基础理论

当设置容器属性为display:flex之后，容器中的所有子元素都会自动flex项目，也就是flex-item，俗称项目。容器默认有两根轴，水平的主轴和垂直的交叉轴，项目默认是沿主轴排序，项目占据主轴空间称 main-size ，项目占据交叉轴的空间称 cross-size，如图：

四、容器有6个属性

flex-direction、flex-wrap、flex-flow、justity-content、align-items、align-content；

4.1、flex-direction 属性是主轴布局排列的方向，有4个属性值，如下：
flex-direction: row; －－－－－－－默认值，水平方向，靠左对齐；
flex-direction: row-reverse; －－－水平方向，靠右对齐；
flex-direction: column; －－－－－垂直方向，向下对齐；
flex-direction: column-reverse; －垂直方向，向上对齐

4.2、flex-wrap属性是主轴决定项目(box)是否换行，有3个属性值，如下：
flex-wrap: nowrap; 默认值，强制不换行；

flex-wrap: wrap; 溢出换行，按顺序行排列；

flex-wrap: row-reverse; 溢出换行，按倒序行排列；

4.3、flex-flow属性其实是flex-direction和flex-wrap的简写集合，如下：
flex-flow: flex-direction || flex-wrap;

4.4、justify-content属性是主轴决定项目(box)对齐方式，有5个属性值，如下：
justify-content: flex-start; －－－－－－－默认值，靠左对齐；
justify-content: flex-end; －－－－－－－ 靠右对齐；
justify-content: center; －－－－－－－－居中；
justify-content: space-between; －－－－两端对齐，项目之间的间隔相等；

justify-content: space-around; －－－－－－－项目之间的边距相等，可以理解成每个项目都设置一个左右外边距（margin:0 10px）；所以中间布局看起来会有边距的两倍；
4.5、align-items属性是交叉轴决定项目(box)对齐方式，有5个属性值，如下：
align-items: flex-start; －－－－－－－靠顶部对齐；
align-items: flex-end; －－－－－－－ 靠底部对齐；
align-items: center; －－－－－－－－ 向中间对齐；
align-items: baseline; －－－－－－－ 靠右对齐；
align-items: stretch; －－－－－－－ 项目没设定高度或者为auto的时候，设置项目(box)高度充满容器的高度；

4.5、align-content属性是交叉轴决定项目(box)对齐方式，有6个属性值，如下：
align-content: flex-start; －－－－－－－靠顶部对齐；
align-content: flex-end; －－－－－－－靠底部对齐；
align-content: center; －－－－－－－中间对齐；
align-content: space-between; －－－－－－－ 间距与justity-content: space-between效果一样，前者是水平，后者是垂直；；
align-content: space-around; －－－－－－－ 间距与justity-content: space-around效果一样，前者是水平，后者是垂直，相当于（margin:10px 0）；

align-content: stretch; －－－－－－－默认值， 如果项目没有充满容器，则间隔自动分配，如果占满则会占满交叉轴；

五、容器中的项目也有6个属性

order、flex-grow、flex-basis、flex-shrink、flex、align-self；
5.1、order属性是定义项目(box)排序方式，值必须是数字，排序方式是 默认不设置或者无效>1>2>3，如下：

5.2、flex-grow(默认为:0)属性在项目(box)没有任何内容下，所占宽度比例是 容器的宽度/设置的数字，例如容器是500px/15=150px，如下：

如果有项目有内容，则从数值最大的项目中压缩出内容的宽度，然后平分到其他项目中，如图：

250-245.06=4.94px最大项目的宽度，另外两个平分得到的宽度:3.95+0.98=4.93px，因为js计算有精度问题，所以会少0.01px。

5.3、flex-basis属性是设置项目(box)的宽度，如果只设置flex-basis: 200px;，没有设置width或者min-width宽度的时候，效果等同于min-width属性一样，如下：


如果设置了flex-basis: 200px; min-width或者width值如果大于flex-basis**，则以前者为准，反之以后者为准，并且在内容溢出200px之外，项目也不会被撑大，如图




5.4、flex-shrink(默认值为0)属性是定义项目(box)的缩放比例，只有当项目总宽度超出容器的宽度才会进行缩放，如下：

5.5、flex属性是flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto，flex: flex-grow | flex-shrink | flex-basis，建议用flex，而不是把另外三个单独写，因为浏览器自动计算的值不一样。

5.6、align-self属性与align-items的属性值一样，比后者多了一个auto，auto是继承父元素的align-items属性，效果可以参照align-items，此属性主要是可以单个设置，会覆盖align-items。