CSS Flex弹性布局详解! (常用的12个属性)
这期是我陆陆续续花了几个小时的时间为大家整理的Flex 弹性布局方法，主要讲了Flex布局的12个常见属性，以及文章最后的一个简单的小案例及其答案，希望对大家有帮助。
1Flex布局是什么?Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :
Flex布局
主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局：
最外边的容器我们称为container：
container
container里面的每个小盒子，我们称为items：
items
1Flex布局有哪些属性?假如现在有一个这样的初始结构:
HTML:
代码语言：javascript代码运行次数：0运行复制
css：
代码语言：javascript代码运行次数：0运行复制.container {
height: 400px;
width: 600px;
background-color: #e1e1e1;
}
页面是这样的 :
11. display: flex;想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局:
代码语言：javascript代码运行次数：0运行复制.container{
display:flex;
}
12. flex再给container容器里面的items1 items2 items3一个统一的颜色、边框并添加flex 属性:
代码语言：javascript代码运行次数：0运行复制.container div {
background-color: #ffb84d;
border: 2px solid #666;
}
.items1 {
flex: 1;
}
.items2 {
flex: 1;
}
.items3 {
flex: 1;
}
页面:
发现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布局
13. flex-direction回到原始的三个items 1:2:1排列的状态，我们给container加一个属性 : flex-direction: column;之后：
三个小items的排列方向发生了变化。因为container上的flex-direction属性决定了主轴的方向, 即项目排列的方向 :
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。14. flex-wrapflex-wrap属性作用在container上，决定了当一排items排不下的时候，应该怎么排布。
代码语言：javascript代码运行次数：0运行复制.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}flex-wrap属性的默认值是nowrap，即不换行(按照宽度比例排列在一行)，当然我们也可以通过改变它的值来进行换行：
现在给container的宽度为600px，三个items的宽度分别为250px，350px，450px，三个items的宽度加起来超过了container的宽度，items会换行，此时如果container的属性为：flex-wrap: wrap;：
若改为flex-wrap: wrap-reverse;：
15. justify-content作用于container上，这个属性定义了项目在主轴上的对齐方式。
代码语言：javascript代码运行次数：0运行复制.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
常见排列：
flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，items之间的间隔都相等。space-around：每个items两侧的间隔相等。所以，items之间的间隔比items与边框的间隔大一倍。justify-content: space-evenly：每个items之间的间隔相等。
初始状态：container宽度600px，三个items宽高均为100px：
我们给container加上justify-content: center;属性：
justify-content: space-between;：
justify-content: space-evenly：
16. align-items定义在container上，决定了items在交叉轴上的对齐方式。
代码语言：javascript代码运行次数：0运行复制.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 以items里第一行文字的基线对齐。stretch（默认值）：如果items未设置高度或设为auto，将占满整个容器的高度。例如：
align-items: center;：
align-items: flex-end;：
align-items: baseline;：
17. align-contentalign-content定义在container上，决定了多行items在交叉轴上的对齐方式(类似于 justify-content在主轴上的效果)，如果items只有一行，那么这个属性将不起作用。也就是说这个属性必须搭配flex-wrap使用，不然items不会换行。
代码语言：javascript代码运行次数：0运行复制.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
flex-start/start：与交叉轴的起点对齐。flex-end/end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。space-evenly：items均匀分布，每个items之间和items和边框之间的距离都相等。stretch（默认值）：轴线占满整个交叉轴。align-content: end;:
align-content: space-between; :
align-content: space-around; :
align-content: space-evenly; :
align-content: center; :
……
18. order该属性在items上，定义了项目的排列顺序，数值越小，排列越靠前，默认值为0。
代码语言：javascript代码运行次数：0运行复制.item {
order:
}
如果我们给items2一个属性:order:-1;，那么items之间的顺序会发生变化：
19. flex-grow定义在items上，决定了items占据剩余空间的能力。注意这里说的是 “ 剩余空间 ” 。
代码语言：javascript代码运行次数：0运行复制.item {
flex-grow: 4; /* default 0 */
}
比如现在是这样的：
我们给其中的items2添加属性：flex-grow:1;，给items3添加属性：flex-grow:2：
如果所有items的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
110. flex-shrink定义在items上，决定了当container空间不足的时候，items缩小的比例，默认为1。
代码语言：javascript代码运行次数：0运行复制.item {
flex-shrink: 3; /* default 1 */
}
如果现在container的宽度为600px，三个items的宽度均为300px，且不给container换行的属性(flex-wrap)，那么就会导致空间不足，此时每个items的默认flex-shrink值为1，三个items会等比例排列在container内：
此时，给items2添加flex-shrink:2的属性：
items2会按比例缩小。如果一个items的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不会缩小。
111. gap, row-agp, column-gapgap属性定义了items之间的空间，并不作用于外边框上。这个属性只定义了items之间的最小间隙，如果间隙以某种方式变大(比如像justify-content: space-between;)，那么间隙将只在该空间最终变小的情况下生效。
代码语言：javascript代码运行次数：0运行复制.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
row-gap: 20px; :
row-gap和column-gap分别定义了items在主轴和交叉轴方向上的最小间隙。
112. align-selfalign-self属性定义在items上，它允许单个items有与其他items有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
代码语言：javascript代码运行次数：0运行复制.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
参考资料:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
1案例以上基本上为flex所有常用的属性，下面我们来做一个小案例，实现一个圣杯布局 :
css和html代码 :
代码语言：javascript代码运行次数：0运行复制
1下期预告Grid布局是和Flex布局一样强大甚至更强大的布局方法，实现以上的圣杯布局, 我们用Gird布局只需要这样做 :
是不是比Flex布局还简单哈哈，下一期我来讲讲Grid布局。