Flex布局计划很适宜利用与多栏等高布局场景，本文将深入分析 flex-grow、flex-shrink，flex-basis 三个属性, 充沛理解这些属性如何与增长和放大的 flex 子元素一起工作是把握 Flex 布局的关键所在。

flex语法

flex-grow、flex-shrink，flex-basis三个属性都是作用在 flex 子元素中，次要管制一个 flex 子元素的以下几个方面:

• flex-grow: 这个 flex 子元素失去多少 残余 空间?
• flex-shrink: 从这个 flex 子元素要 膨胀 多少空间?

• flex-basis: 在 flex 子元素未伸张和膨胀之前，它的 原始 大小是多少?

  flex-basis

Q1: 浏览器如何确定 flex 子元素的空间大小

能够通过 flex-basis 属性确定 flex 子元素空间大小，取值如下(以主轴方向程度为例):

flex-basis: <width> | content;
where <width> = auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)

1. flex-basis值为auto：

   • 若设置了 width，flex 子元素原始大小为width；
   • 否则 flex 子元素原始大小为max-content。

            /* 设置了 `width` 为 100px，flex 子元素原始大小为 100px*/
            .test > div:nth-child(1){
                background-color: red;
                flex-basis: auto;
                width: 100px;
            }
            
            /* 不设置 width,flex 子元素原始大小为 max-content*/
            .test > div:nth-child(1){
                background-color: red;
                flex-basis: auto;
            }

2. flex-basis值为 <length> | <percentage>（XXpx,XX%)，将应用<length> | <percentage> 作为 flex 子元素原始大小。

            /* 设置了 flex-basis 为 100px，flex 子元素原始大小为 100px*/
            .test > div:nth-child(1){
                background-color: red;
                flex-basis: 100px;
            }
            
            /* 设置了 flex-basis 为 100px，同时设置 width 为 200px,flex 子元素原始大小仍为 100px*/
            .test > div:nth-child(1){
                background-color: red;
                flex-basis: 100px;
                width:200px;
            }

当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width , flex-basis 具备更高的优先级.

1. flex-basis值为 0，则 flex 子元素原始大小为min-content。

Q2: 关键字为 min-content 和max-content的含意？

从字面意思了解，就是代指最小内容空间和最大内容空间：

1. min-content：文本全副主动换行

            .test > div:nth-child(1){
                background-color: red;
                flex-basis: auto;
                width: min-content;
            }

2.max-content: 不会主动换行. 如果 flex 容器太窄，它就会导致溢出容器

            .test > div:nth-child(1){
                background-color: red;
                flex-basis: auto;
                width: max-content;
            }

flex-grow

Q1:flex-grow中的残余空间是指哪局部空间

Flex 布局中有 flex 容器和 flex 子元素，flex 子元素蕴含在 flex 容器中，那么当 flex 子元素在主轴上的 原始 大小之和小于 flex 容器的时，flex 容器中就会有多余的空间没有被填充，这些空间就被叫做成为残余空间。

Q2: 未调配完的残余空间如何调配?

若想利用全副的空间，思考应该如何调配残余空间呢？残余空间的调配形式应该能够高度灵便，毕竟不可能每个设计者都有一样的空间调配策略。flex-grow能够确定残余空间的调配形式，因为每个 flex 子元素都能够有不同的 flex-grow 值，因而能够将 flex-grow 值作为空间调配权重来确定该子元素取得多少残余空间。

例如

若 flex 容器为 800px,flex 子元素有三个 div1、div2、div3，别离为 100px、200px、300px，则残余空间为 200px(800-100-200-300)。
假设三个 flex 的 flex-grow 值为 1,1,2。则残余空间调配如下：

$$
div1(残余空间)=200px*(1/(1+1+2))=50px
$$

$$
div2(残余空间)=200px*(1/(1+1+2))=50px
$$

$$
div3(残余空间)=200px*(2/(1+1+2))=100px
$$

上述思维应该很容易了解，无非就是通过 flex-grow 确定残余空间调配的权重。因而 flex 子元素的总空间为:

$$
div1(总空间)=100px+50px=150px
$$

$$
div2(总空间)=200px+50px=250px
$$

$$
div3(总空间)=300px+100px=400px
$$

持续思考，要是我不想全副残余空间都调配完呢，我就想调配 40% 残余空间 (80px) 怎么办呢？是否不通过减少额定参数将残余空间调配总额指定好呢？其实还是通过 flex-grow 来确定，若各子元素的 flex-grow 总和小于 1, 则代表不齐全调配残余空间，各子元素的 flex-grow 总和即为调配残余空间的百分比。

例如

若 flex 容器为 800px,flex 子元素有三个 div1、div2、div3，别离为 100px、200px、300px，则残余空间为 200px(800-100-200-300)。
假设三个 flex 的 flex-grow 值为0.1,0.1,0.2。则残余空间调配如下：

$$
div1(残余空间)=200px*(0.1+0.1+0.2)*(1/(1+1+2))=20px
$$

$$
div2(残余空间)=200px*(0.1+0.1+0.2)*(1/(1+1+2))=20px
$$

$$
div3(残余空间)=200px*(0.1+0.1+0.2)*(2/(1+1+2))=40px
$$

$$
div1(总空间)=100px+20px=120px
$$

$$
div2(总空间)=200px+20px=220px
$$

$$
div3(总空间)=300px+40px=340px
$$

$$
调配后残余空间 =200px*(1-0.1-0.1-0.2)=200px*0.6=120px
$$

持续思考，一种很常见的布局是每个 flex 子元素均分 flex 容器的空间，是否意味着须要自行准确计算各 flex 子元素需取得多少残余空间？那要是所有残余空间都不够让 flex 子元素空间均分呢？

答案显然是否定的，仅须要实现以下两步:

1. 设置所有 flex 子元素 flex-basis 值为 0 ，通知浏览器 flex 子元素的原始大小视为 0，即所有空间均为残余空间；
2. 设置所有 flex 子元素 flex-grow 值为 1(雷同即可），通知浏览器 flex 子元素均分残余空间。

flex-shrink

flex-shrink属性指定了 flex 放大值, 即 flex 子元素绝对于其余 flex 子元素膨胀的水平.

Q1:flex子元素什么时候会产生膨胀？

不言而喻，当 flex 子元素 ** 原始大小之和小于 flex 容器时，就会产生膨胀。因为元素若不膨胀，必然导致溢出。

Q2:flex子元素膨胀最小空间是多少？是否缩为 0px？

假如 flex 子元素空间膨胀为 0，则无奈将 flex 子元素信息示意进去，因而浏览器设定最小搜寻值 width 取min-content时，即 flex 子元素利用所有机会换行的宽度。

Q3:flex子元素如何确定各自膨胀空间？

$$
总膨胀空间 =flex 子元素原始大小之和 – flex 容器大小
$$

思考，若是你是设计者如何安顿各 flex 子元素的膨胀空间？

例如: 若 flex 容器为 300px,flex 子元素有三个 div1、div2、div3，别离为 100px、200px、300px, 假设三个 flex 的flex-shrink值为1,1,1。

显然, 总膨胀空间为：

$$
总膨胀空间 = (100px + 200px +300px) – 300px = 300px
$$

因为 flex-shrink 值为 1,1,1，是否相似flex-grow 按比例 1:1:1 调配总膨胀空间，即 div1、div2、div3 均膨胀 100px 空间？这种调配策略间接导致 div1 膨胀至 0px，但 div3 仍有 200px。

浏览器并未采纳这种粗犷的调配计划，而是采纳更加偏心的调配计划，即 空间更多的 flex 子元素膨胀量应该更大，以确保空间小的 flex 子元素不至于过小。，因而，调配计划以 flex 子元素原始大小乘以 flex-shrink 值作为权重：

$$
flex 子元素应膨胀空间 = 总膨胀空间×（flex 子元素原始大小 *shrink 值）/\sum（flex 子元素原始大小 *shrink 值）
$$

因而，例题中的膨胀空间调配为：

$$
总膨胀空间 = (100px + 200px +300px) – 300px = 300px
$$

$$
\sum（flex 子元素原始大小 *shrink 值）= 1*100+1*200+1*300 = 600
$$

$$
div1(应膨胀空间)=300px*(1*100)*(600)=50px
$$

$$
div2(应膨胀空间)=200px*(1*200)*(600)=100px
$$

$$
div3(应膨胀空间)=200px*(1*300)*(600)=200px
$$

Q4: 若不想齐全调配膨胀空间应该如何设置 flex-shrink 值？

不齐全调配膨胀空间将导致溢出行为，相似 flex-grow，，若各子元素的flex-shrink 总和小于 1, 则代表不齐全调配膨胀空间，各子元素的 flex-shrink 总和即为调配膨胀空间的百分比。这里就不开展赘述了。

Q5: 膨胀空间过程中 flex 子元素达到 min-content 会如何影响 flex 空间调配？

持续思考，flex子元素原始大小为 100px，且 min-content 为 20px, 但 flex 子元素的应膨胀空间为 100px, 则 flex 子元素只会膨胀至 20px。那该元素未膨胀的 20px 对容器内的其余 flex 元素空间是否有影响呢？

例如: 若 flex 容器为 300px,flex 子元素有三个 div1、div2、div3，别离为 100px、200px、300px, 假设三个 flex 的flex-shrink值为 1,1,1，且min-content 均为 60px。

依据 Q3 的膨胀空间调配计算结果，不思考 min-content 下，div1、div2、div3 别离应膨胀 50px,100px,200px。
但因为 min-content 影响，div1 无奈膨胀至 50px，只能膨胀至 60px，残余未膨胀的 10px 将退出至 div2、div3 膨胀总空间，而后再由 div2、div3 按 Q3 的膨胀空间分配原则计算得出最终 div2、div3 膨胀调配后果。