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膨胀调配后果。