深入分析Flex布局空间分配

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 具有更高的优先级.

3. 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\ast (1/(1+1+2))=50px$$
$$div2(剩余空间)=200px\ast (1/(1+1+2))=50px$$
$$div3(剩余空间)=200px\ast (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\ast (0.1+0.1+0.2)\ast (1/(1+1+2))=20px$$
$$div2(剩余空间)=200px\ast (0.1+0.1+0.2)\ast (1/(1+1+2))=20px$$
$$div3(剩余空间)=200px\ast (0.1+0.1+0.2)\ast (2/(1+1+2))=40px$$
$$div1(总空间)=100px+20px=120px$$
$$div2(总空间)=200px+20px=220px$$
$$div3(总空间)=300px+40px=340px$$
$$分配后剩余空间=200px\ast (1-0.1-0.1-0.2)=200px\ast 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子元素应收缩空间=总收缩空间\times （flex子元素原始大小\ast shrink值）/\sum （flex子元素原始大小\ast shrink值）$$

因此，例题中的收缩空间分配为：
$$总收缩空间=(100px+200px+300px)-300px=300px$$
$$\sum （flex子元素原始大小\ast shrink值）＝1\ast 100+1\ast 200+1\ast 300=600$$
$$div1(应收缩空间)=300px\ast (1\ast 100)\ast (600)=50px$$
$$div2(应收缩空间)=200px\ast (1\ast 200)\ast (600)=100px$$
$$div3(应收缩空间)=200px\ast (1\ast 300)\ast (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收缩分配结果。