【flex布局】理解flex-grow、flex-shrink和flex-basis

在使用弹性布局的时候，我们经常用上述三个css属性去控制弹性元素在主轴方向上的尺寸和伸缩性。接下来将详细介绍下在控制这三个属性的应用场景和功能特性。

首先先理解几个在flex伸缩计算时，遇到的基本概念：

• min-content和max-content：当没有设置元素的绝对宽高的时候，就会涉及到这两个属性的应用。给个例子，我们有两段包含一个文本字符串的段落。第一段设置了 min-content 的宽度。在支持这个关键字的浏览器你可以看见文本已尽可能抓住机会来自动换行，使之变得尽可能小且没有溢出。这就是该字符串的 min-content 大小。本质上讲，字符串中最长的单词决定了大小。

  第二段设置了 max-content 值，其与前者相反。它会变得尽可能大，没有自动换行的机会。如果容器太窄，它就会溢出其自身的盒子。

• 正负可用空间：当一个弹性容器有正可用空间时，它就有更多的空间用于在容器内显示弹性元素；当弹性元素的自然尺寸加起来比弹性容器内的可用空间大时，我们产生了负可用空间 。通过flex-direction切换主轴（row还是column），伸缩概念同理。

一、flex-grow【默认值1，初始值0】

flex-grow指定了弹性增长因子（flex grow factor），这决定了在分配正可用空间时，弹性元素相对于弹性容器中的其余弹性元素的增长程度。

所以flex-grow在存在正可用空间时，分配空间按照其值的grow比例进行分配。如果 所有弹性元素的flex-grow 的值全部相同，并且在弹性容器中还有正可用空间，那么它就会被平均地分配给所有元素

二、flex-shrink【默认值、初始值均为1】

flex-shrink属性指定了弹性收缩因子（flex shrink factor），它确定在分配负可用空间时，弹性元素相对于弹性容器中其余弹性元素收缩的程度。只要 flex-shrink 有正值，元素就会收缩以至于它们不会溢出容器。因此 flex-grow 用于添加可用空间，而 flex-shrink 减少空间来使盒子适应它们的容器而不溢出

其值的大小，和flex-grow类似，0为不可收缩，1或者其他比例则按比例收缩在负空间中

三、flex-basis【除0外的值，带单位表示弹性元素的大小；0代表不考虑尺寸】

flex-basis指的是在任何空间分配发生之前初始化弹性元素的尺寸。

flex-basis有两个关键字：

• auto：如果元素显式定义了宽度，比如200px,则flex-basis定义为200px；如果元素没有定义宽度，则 auto 会解析为其内容的大小。此时你所熟知的 min- 和 max-content 大小会变得有用，弹性盒子会将元素的 max-content 大小作为 flex-basis。
• content：该关键字使得显式定义宽度变得无效，而是完全根据元素的内容大小去取值。

空间分配时，如果你想要弹性盒子完全忽略元素的尺寸就需要设置 flex-basis 为 0。这显式地说明弹性盒子可用抢占所有空间，并按比例进行分配

四、flex属性：三者的组合

我们经常在弹性元素中会看到  flex:1  这个属性，那么flex代表什么呢？简而言之，flex属性就是flex-grow 、flex-shrink 、flex-basis三者的简写表达，可以使用一个，两个或三个值来指定 flex 属性。

单值语法：值必须是以下之一：

• 一个代表 <flex-grow> 的有效值，此时其他简写会扩展为 flex: <flex-grow> 1 0。

所以对于flex：1代表的是flex: 1 1 0

• 一个代表 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
• 关键字 none 、initial、auto。

1.none：完全非弹性元素，根据自身元素的宽高设置，不会适应flex容器的变化。其代表的是'flex: 0 0 auto'

2.initial： 根据自身元素的宽高设置，不会伸展，但是会根据flex容器大小的变化做出收缩。其代表的是'flex:0 1 auto'

3.auto：元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器，其代表的是'flex:1 1 auto'

双值语法：

• 第一个值必须是一个 flex-grow 的有效值。
• 第二个值必须是以下之一：
  • 一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。
  • 一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。 

三值语法：值必须按照以下顺序指定：

1. 一个 flex-grow 的有效值。
2. 一个 flex-shrink 的有效值。
3. 一个 flex-basis 的有效值。