最近在准备年后的面试，趁现在有时间把css部分好好补一下，就先从flex的三个属性开始吧。

前置知识：了解flex的基本使用，了解盒模型。

flex-grow

默认值：0

作用：当元素无法充满父元素时，定义剩余的空间怎么分配（添加到子元素上）。

使用方法如图所示：

源码：

flex-shrink

默认值：1

作用：与grow相反，shrink用于定义在父元素宽度不够的情况下，子元素如何分配空间，shrink越大，代表需要承担的越多。

计算方法：

1. 先计算出溢出的宽度
2. 计算出子元素各自的shrink比例（个体÷所有）
3. 计算出每块应该承担的宽度（溢出的宽度*每一块所占比例），在每一块中删除

例子：

前提：父元素宽度为120，gap为10，因此实际可以放元素的区域为110； 子元素width都为50。

1. shrink为默认值1

则每一个子元素的实际宽度都相同，都为：50 - (3*50 - 110) * (50 / 150)≈ 36.66

2. 第一个的shrink为0.5，其他为默认值1

则计算方法为：50 - (150 - 110) * (0.5 / 2.5) = 42

但实际上并不是42，而是43.6，这是为什么？

因为此处的子元素有边框，而盒模型使用的是标准盒模型。width不包括border、padding，实际占用的宽度为50 + 2 * 2 = 54，计算的结果为：54 - (543 - 110) * [540.5 / (54*2.5)] = 43.6

而shrink为1时，浏览器为了简化计算，忽略了border直接取width值。

3. 第一个shrink为0.5，第二个shrink为0.3，第三个shrink为0.2

则计算方法为：
第一个：54 - (543 - 110) * [(540.5) / (540.5 + 540.3 + 54*0.2)] = 28

第二个：54 - (543 - 110) * [(540.3) / (540.5 + 540.3 + 54*0.2)] = 38.4

第三个：54 - (543 - 110) * [(540.2 / (540.5 + 540.3 + 54*0.2)] = 43.6

源码：

flex-basis

此处参考了张鑫旭老师的文章，有时间的同学推荐阅读一下，还有很多细节的东西我没有写：www.zhangxinxu.com/wordpress/2…

默认值：auto

作用：设定元素在flex布局下的基础尺寸，可以完全替代width。当basis为auto时，才会去取width的值。

注意

1. 当内容超出basis的范围时，元素尺寸会自动拉伸。但此时如果存在width，元素尺寸会以width为准。因此尽量不要同时使用width和basis。

2. 关于flex布局中尺寸的生效优先级：min-width/max-width > basis > width

结语

用了两天上班摸鱼的时间，总算是把这三个属性基本搞明白了。接下来打算去学习flex: 1、flex: 0等都有什么区别，以及flex的其他特性，如果评论区有小伙伴需要的话我可以将这部分知识也整理出来

最后再次推荐张鑫旭老师的博客，这些年来大佬一直在坚持分享，真的很佩服：www.zhangxinxu.com/wordpress/c…