css Flex布局的可伸缩性(Flexibility)

Flexibility

Flex伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间，也会按照 收缩比率 缩小各项目以避免溢出。

Flex属性

flex属性可用来指定 可伸缩长度 的部件：扩展比率，收缩比率，伸缩基准线。当有一个元素是伸项目时，flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则flex属性不生效。

flex 是 flex-grow、flex-shrink、flex-basis的缩写

<'flex-grow'> 取值为 <number> ，用来指定项目的扩展比率；若在flex缩写省略了此属性值，则flex-grow的指定值是 1； <'flex-shrink'>取值为 <number> ，用来指定项目的收缩比率；若在flex缩写省略了此属性值，则flex-shrink的指定值是 1； <'flex-basis'>取值为 <length> | auto ，用来定义在分配多余空间之前，项目占据的主轴空间，也就是子元素的基准值，flex-basis 规定的范围取决于 box-sizing；若在flex缩写省略了此属性值，则flex-basis的指定值是 0%。

flex-basis取值的几种情况：

固定的长度值，（比如350px），则该项目将占据固定长度的空间； auto,首先会检索该项目的主尺寸（也就是该项目的width/height的值，是width还是height取决于主轴的方向，下面假设主轴的方向为水平方向），如果该项目的主尺寸不为auto，则该项目的flex-basis（基准值）采用主尺寸的值；如果该项目的主尺寸为auto（也就是width:auto或不设置项目的width属性时），则使用该项目的内容content大小为基准值； 百分比，根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

flex 的常见值

flex的默认值：由于 flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto，所以flex的默认值为：flex:0 1 auto;

flex: 0 auto：由于之前提到过，若在flex的缩写中省略了flex-shrink的值，则该值指定为 1，所以flex:0 auto就相当于flex:0 1 auto（也就是与flex取默认值一样）；