第4天：图解 FlexBox 布局（下）

上一节课程我们学习了 FlexBox 容器相关的属性 第2天：图解 FlexBox 布局（上），@傅hc 、@Eric、@刘军提到一个图画错了，这里纠正一下，他们太认真了搞得我都不能大意，在这里感谢这 3 位同学。

这节课程介绍与 flex-item 相关的属性，下图中显示了 flex-item 相关的属性：

flex-item 最重要的 3 个属性是 flex-grow（扩展比例）、flex-shrink（收缩比例）、flex-basis（伸缩基准），它们决定了 item 在「主轴」上的尺寸，只有彻底理解了这 3 个属性，才能彻底理解 FlexBox 布局。下面以 flex-direction 为 row（主轴为水平方向） 进行说明 3 个属性是如何计算布局的。

1.flex-grow（扩展比例）：占剩余空间的比例

由于 flex-grow 会受 flex-basis 的影响，所有下面的例子假如 flex-basis 的值为 auto。

它的作用就是，当所有的 item 未占满容器的宽度时，item 该如何扩充自己以填满容器的剩余空间。理解这个属性前关键要理解剩余空间，在 flex 容器中，如果所有 item 的宽度和小于容器的宽度，那么容器的剩余空间等于容器宽度减去所有item宽度的和。每个 item 的宽度为 150px，容器宽度为 600 px，剩余空间为 600 - 3*150 = 150px， 一图胜千言：

如果给每个 item 设置 flex-grow 为 1，它表示每个 item 占用相同比例的剩余空间，这样每个 item 增加的宽度为 150 * 1/3  = 50px。最终效果变成：

flex-grow 的默认值为 0，表示即使有剩余空间，item 也不会扩充。它不能为负数，但是可以为小数，如果上面的例子中，给每个 item 设置 flex-grow 为 0.2，这样每个 item 增加的宽度为 150 * 0.2  = 30px，最终还会有 60px 的剩余空间未被占用。

总之 flex-grow 的值可以理解成比例，总剩余空间可以看成 1，剩余空间会受 flex-basis 影响，下面会提到这个属性的使用。还有一点需要明确，item 增长会受 max-width 的影响，增长后的最大长度只能是 max-width。

2.flex-shrink（收缩比例）：占缺少空间的比例（item*shrink作为收缩比例），当所有的 item 的宽度和大于容器的宽度，就会出现容器空间不足的情况，这时可以通过缩放比例来缩放每个 item 的宽度。假如每个 item 的宽度为 250px，容器宽度为 600 px，缺少空间为 600 - 3*250 = -150px， 一图胜千言：

一旦出现空间不足，可以通过 flex-shrink 控制每个 item 是否要进行缩放，缩放的比例是多少。如果设置 flex-shrink：1，每个 item 将缩放同样的宽度，其值为 150 * 1/3 = 50px，效果如下：

flex-shrink 的默认值是 1，也就是说当空间不足的时候，item 会以同样的尺寸进行缩放。但是这个属性和 flex-grow 在极端的情况下表现并不相同，因为在缩小的过程中，不会把 item 的尺寸缩小到 0，它会受 min-content 的影响，也会受 min-width 的影响，缩到一定尺寸后它就不再进行缩放了。

3.flex-basis （伸缩基准）：它表示 item 未扩展或收缩之前的宽度，可以理解为 item 未放入容器时该有的尺寸，默认值是 auto。它会影响剩余空间和不足空间的计算，它对 flex-grow 和 flex-shrink 有很大的影响。为了更容易说明问题，写了个 demo，下面关于不同属性值的介绍会根据这个 demo 来说明。主要代码：

.main {    margin: 20px;    background-color: #eeeeee;    display: flex;    width: 600px;    height: 200px;}div div {    height: 40px;    color: white;    font-size: 26px;    font-weight: bold;    text-align: center;}
div div:nth-child(1) {    background-color: red;}
div div:nth-child(2) {    background-color: black;}
div div:nth-child(3) {    background-color: purple;}

最外层的 div（main选择器） 为 FlexBox 容器，它的直接子元素为 flex-item，共有 3 个：

<div class="main">    <div>前端小课</div>    <div>FlexBox World</div>    <div>Layout For CSS</div></div>

效果如下，这个时候 flex-item 的属性都是默认属性。
flex-grow：0，表示即使有剩余空间也不会扩展；
flex-shink：1，如果空间不足将会缩小；
flex-basis：auto，自动计算 item 的初始宽度，浏览器首先会看是否给 item 设置了宽度，代码中未设置则使用的是内容的宽度；

<1>.修改第一个 item 的选择器，设置它的宽度为 160px，发现 flex-basis 的值变为了 160px。也就说如果 item 设置了宽度（width: 160px），那么 flex-basis 的值就是 item 的宽度：

div div:nth-child(1) {    background-color: red;    width: 160px;}

<2>.再次修改第一个 item 的选择器，设置它的 flex-basis 属性值为 120px，发现 item 的宽度变成了 120px：

div div:nth-child(1) {    background-color: red;    width: 160px;    flex-basis: 120px;}

<3>.再次修改第一个 item 的选择器，设置它的 max-size 属性值为 110px，发现 item 的宽度变成了 110px：

<4>.设置 item 的 flex-basis： 0，flex-grow： 1，最终效果是所有的 item 的尺寸都是一样，设置 flex-basis 为 0 时相当于所有的空间都可以进行分配，每个 item 的初始宽度为 0，这样就达到了所有的 item 宽度一样：

div div {    height: 40px;    color: white;    font-size: 26px;    font-weight: bold;    text-align: center;    flex-basis: 0;    flex-grow: 1;}

总的来说 flex-basis 最终的值会以 flex-basis -> content size -> width 的属性依次确定它的值。

4. flex：它是 flex-grow、flex-shrink 和 flex-basis 的缩写。

flex：initial（默认值），等同于 flex：0 1 auto；
flex：auto，等同于 flex: 1 1 auto;
flex：none，等同于 flex: 0 0 auto;
flex：1，等同于 flex: 1 1 0;

5. order ：默认值为 0，设置 item 的值可以改变它在 FlexBox 容器中的位置，它的值可以是负数也可以是整数。上面的代码修改第一个和最后一个 item，添加 order 属性，初始 item 的顺序：

div div:nth-child(1) {    background-color: red;    order: 3;}div div:nth-child(3) {    background-color: purple;    order: -1;}

修改order后item的顺序：

总结

flex-item 属性涉及到的内容比较多，我并没有把所有的内容都讲到，想要彻底理解建议通过MDN查看详细的内容，文末的链接是我精心挑选的，可以帮助你更深地理解 flex-item 的属性。

今天的有效打卡指令（任意一个）：

1. flex-item 都有哪些属性？

2. 对 flex-box 布局是否还有疑问？
3.最近想学习英语，打算公众号每天单独发一个句子，我们一起来翻译，边学技术边学英文，如何？如果支持留言 +1、反对留言 -1。
4.自由发挥。

---

推荐阅读：

第2天：图解 FlexBox 布局（上）
1. https://mp.weixin.qq.com/s/RToagftjso6CiW3pgig2iA
2. https://gedd.ski/post/the-difference-between-width-and-flex-basis/
3. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax