这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法，主要讲了Flex布局的12个常见属性，以及文章最后的一个简单的小案例及其答案，希望对大家有帮助。

Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :

Flex布局

主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局：

最外边的容器我们称为container：

container

container里面的每个小盒子，我们称为items：

items

假如现在有一个这样的初始结构:

HTML:

css：

页面是这样的 :

想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局:

再给container容器里面的items1 items2 items3一个统一的颜色、边框并添加flex 属性:

页面:

发现container里面的三个items水平等宽分布，这就是flex布局的基本应用。

如果我们把items1的flex的值改为2：

看到这你应该就知道flex属性的作用了, 对, 就是盒子占总量的份数 。如果删掉items2的flex:2属性, 给它一个固定的宽度:300px, 那么另外两个盒子仍然按照1:1的比例排列 :

flex布局可以嵌套, 比如我们现在给items3里再加两个div：items3-1 和 items3-2 , 再给items3添加display:flex;和flex-direction:column属性(下边会讲到这个属性), 最后给items3-1和 items3-2分别添加属性:flex:1和flex:2, 看效果 :

在items3里嵌套使用了Flex布局

回到原始的三个items 1:2:1排列的状态，我们给container加一个属性 : flex-direction: column;之后：

三个小items的排列方向发生了变化。因为container上的flex-direction属性决定了主轴的方向, 即项目排列的方向 :

flex-wrap属性作用在container上，决定了当一排items排不下的时候，应该怎么排布。

flex-wrap属性的默认值是nowrap，即不换行(按照宽度比例排列在一行)，当然我们也可以通过改变它的值来进行换行：

现在给container的宽度为600px，三个items的宽度分别为250px，350px，450px，三个items的宽度加起来超过了container的宽度，items会换行，此时如果container的属性为：flex-wrap: wrap;：

若改为flex-wrap: wrap-reverse;：

作用于container上，这个属性定义了项目在主轴上的对齐方式。

常见排列：

初始状态：container宽度600px，三个items宽高均为100px：

我们给container加上justify-content: center;属性：

justify-content: space-between;：

justify-content: space-evenly：

定义在container上，决定了items在交叉轴上的对齐方式。

例如：

align-items: center;：

align-items: flex-end;：

align-items: baseline;：

align-content定义在container上，决定了多行items在交叉轴上的对齐方式(类似于 justify-content在主轴上的效果)，如果items只有一行，那么这个属性将不起作用。也就是说这个属性必须搭配flex-wrap使用，不然items不会换行。

align-content: end;:

align-content: space-between; :

align-content: space-around; :

align-content: space-evenly; :

align-content: center; :

……

该属性在items上，定义了项目的排列顺序，数值越小，排列越靠前，默认值为0。

如果我们给items2一个属性:order:-1;，那么items之间的顺序会发生变化：

定义在items上，决定了items占据剩余空间的能力。注意这里说的是 “ 剩余空间 ” 。

比如现在是这样的：

我们给其中的items2添加属性：flex-grow:1;，给items3添加属性：flex-grow:2：

如果所有items的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

定义在items上，决定了当container空间不足的时候，items缩小的比例，默认为1。

如果现在container的宽度为600px，三个items的宽度均为300px，且不给container换行的属性(flex-wrap)，那么就会导致空间不足，此时每个items的默认flex-shrink值为1，三个items会等比例排列在container内：

此时，给items2添加flex-shrink:2的属性：

items2会按比例缩小。如果一个items的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不会缩小。

gap属性定义了items之间的空间，并不作用于外边框上。这个属性只定义了items之间的最小间隙，如果间隙以某种方式变大(比如像justify-content: space-between;)，那么间隙将只在该空间最终变小的情况下生效。

row-gap: 20px; :

row-gap和column-gap分别定义了items在主轴和交叉轴方向上的最小间隙。

align-self属性定义在items上，它允许单个items有与其他items有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

参考资料:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

以上基本上为flex所有常用的属性，下面我们来做一个小案例，实现一个圣杯布局 :

css和html代码 :

Grid布局是和Flex布局一样强大甚至更强大的布局方法，实现以上的圣杯布局, 我们用Gird布局只需要这样做 :

是不是比Flex布局还简单哈哈，下一期我来讲讲Grid布局。