前言
目前flex布局在前端使用的非常广泛，这得益于它的页面自适应性。通过设置flex-grow和flex-shrink属性，flex可以做到精细的页面布局，😱恐怖如斯不过如此。
语法
那么flex的语法是什么样的呢？
共有三种语法形式：
-
单值
- 如果单值是一个无单位数，它会被当成flex-grow的值。
- 如果单值是一个有效的宽度值，可以是百分比也可以是px等单位，它会被当成flex-basis的值。
-
双值，双值语法的第一个值必须是一个无单位数，作为flex-grow的值。第二个值可以分为两种情况：
- 如果是一个无单位数，它会被当作flex-shrink的值。
- 如果是一个有效宽度值，它会被当做flex-basis的值。
-
三值，这个就简单了。第一个值必须为无单位数，第二个值必须为无单位数，第三个值必须是一个有效宽度。这三个值分别代表flex-grow、flex-shrink、flex-basis。
实际上，flex可以拆分成三个属性：
- flex-basis，如果没有设置，则默认为auto，即设置成content内容宽度。
- flex-grow，初始值为0，可以设置成其他数字。
- flex-shrink，初始值为1，可以设置成其他数字。
示例准备
好了，接下来就是如何使用了。这三个值是如何配合使用的呢？
我们有如下html结构
<div id="box">
<div class="flex flex1">1</div>
<div class="flex flex2">2</div>
<div class="flex flex3">3</div>
</div>
以及如下的css样式表：
* {
margin: 0;
padding: 0;
}
#box {
display: flex;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #000000;
}
.flex {
color: #ff0000;
background-color: lime;
margin: 5px;
padding: 5px;
}
.flex1 {
width: 200px;
flex-grow: 2;
flex-shrink: 3;
}
.flex2 {
width: 100px;
flex-basis: 120px;
flex-grow: initial;
flex-shrink: 2;
}
.flex3 {
width: 150px;
flex-basis: 300px;
flex-grow: 2;
flex-shrink: initial;
}
开始拉伸
接下来就是调整浏览器的宽度了，这里我们调整到800px。
首先计算三个子元素的总宽度： 800px - 3 * 10px（padding） - 3 * 10px（margin）= 740px。
子元素flex1由于没有设置flex-basis，参与计算的宽度是其默认的宽度200px；子元素flex2设置了flex-basis，参与计算的宽度是120px；同理，子元素flex3参与计算的宽度是300px；三个元素的宽度总和为200px + 120px + 300px = 620px。
显而易见，620px小于740px，所以要在flex容器内部进行自适应的拉伸，总共拉伸740px - 620px = 120px，三个元素参与拉伸的因子分别为2、0、2。
flex1占比 2 / (2 + 0 + 2) = 50%，共拉伸120px * 0.5 = 60px，最终布局宽度为200px + 60px = 260px。
开始收缩
接下来，将浏览器的宽度拉伸到500px。
首先计算三个子元素的宽度： 500px - 3 * 10px（padding） - 3 * 10px（margin）= 440px。
子元素flex1由于没有设置flex-basis，参与计算的宽度是其默认的宽度200px；子元素flex2设置了flex-basis，参与计算的宽度是120px；同理，子元素flex3参与计算的宽度是300px；三个元素的宽度总和为200px + 120px + 300px = 620px。
显而易见，620px大于440px，所以要在flex容器内部进行自适应的收缩，总共拉伸620px - 440px = 180px，三个元素参与拉伸的因子分别为3、2、1。
flex1收缩 3 * 200 * 180 / (3 * 200 + 2 * 120 + 1 * 300 ) = 105.89px，最终布局宽度为200px - 94.74px = 105.26px。
flex2收缩 2 * 120 * 180 / (3 * 200 + 2 * 120 + 1 * 300 ) = 37.89px，最终布局宽度为120px - 37.89px = 82.10px。
flex2收缩 1 * 300 * 180 / (3 * 200 + 2 * 120 + 1 * 300 ) = 47.37px，最终布局宽度为300px - 47.37px = 252.63px。
小结
- flex-basis在flex布局收缩和拉伸中起到了重要作用。
- flex-grow初始值为0。
- flex-shrink初始值为1。
通过三个值的合理搭配，我们可以做出完美的响应式布局。
