Flex布局方案很适合应用与多栏等高布局场景，本文将深入分析flex-grow、flex-shrink，flex-basis三个属性,充分了解这些属性如何与增长和缩小的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>)
复制代码

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;
            }
复制代码

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

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

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

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

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;
            }
复制代码

微信截图_20210508111211.png

`flex-grow`

Q1:flex-grow中的剩余空间是指哪部分空间

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

微信截图_20210508111221.png

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。则剩余空间分配如下：