11.21 CSS 伸缩性（Flexibility）
弹性布局赋予弹性项目可伸缩性，可以改变其宽度/高度，以填充可用空间。这通过设置flex属性来实现。
下面这个例子演示flex: auto属性值的效果。除了给每个弹性项目添加了flex: auto外，其余和上一章节中的例子一样。 第一行有60px的剩余空间，而所有项目具有相同的伸缩性（Flexibility），所以第一行的3个项目将平均分配剩余的空间，也就是获得20px的额外宽度， 这样最终是占据100px的宽度（含内外边距）。而第二行的单独项目将自我延展到占据整个行宽（300px）。
弹性容器将未使用的空间根据弹性项的弹性生长因子（flex grow factor）来按比例分配，或者根据它们的弹性收缩因子（flex shrink factor）来按比例收缩以防止溢出。
flex属性
flex属性是flex-*系列属性的速写方式，语法如下：
flex: none | [ ? || ]
flex属性指定一个弹性长度：弹性生长因子（flex-grow）、弹性收缩因子（flex-shrink），和弹性基准（flex-basis）。当box是一个弹性项时，将参考flex属性而不是main size属性来最终确定该box的main size。flex属性对于非弹性项没有作用。
- <‘flex-grow’>
- 定义弹性生长因子，用来确定剩余空间的分配比例。默认值为1。
- <‘flex-shrink’>
- 定义弹性收缩因子，用来确定弹性项的收缩比例。默认值为1。
- <‘flex-basis’>
- 定义弹性基准：即在剩余空间被分配之前，弹性项的初始main size。可和width属性的取值相同（除了
auto值）或为一个'content'关键词。默认值为0%。如果flex-basis是auto，那么实际弹性基准的值是该弹性项的main size属性的计算值，如果这个计算值自身也是auto，则弹性基准值由该项目的内容所确定。
- none
- 关键词 none 等同于
0 0 auto。
flex属性的初始值为 flex: 0 1 auto。
注意：flex-grow 和 flex-basis 普通写法的初始值和flex速写中的默认值是不同的。
前面没有声明任何弹性因子时，无单位的0必须被解析为一个弹性因子，以免错误解析或无效声明。作者必须给<‘flex-basis’>指定一个单位，或者跟在2个弹性因子后面。
flex属性的常用取值
- flex: initial
- 上面提到过，这就是初始值，相当于
flex: 0 1 auto。根据width/height属性来设定尺寸。当存在剩余空间时，弹性项不生长，但是如果空间不够时会发生收缩。 可以使用对齐或自动边距（auto margin）来在主轴线（main axis）方向上对齐弹性项目。 - flex: auto
- 相当于
flex: 1 1 auto。基于宽度/高度属性来设定项目的尺寸，但使它们完全弹性，因此，它们吸收沿主轴线的任何自由空间。 - flex: none
- 相当于
flex: 0 0 auto. 基于宽度/高度属性来设定项目的尺寸，但使它们完全非弹性（即固定大小，有剩余空间不会生长，内容溢出也不发生收缩）。 - flex: <positive-number>
- 相当于
flex: <positive-number> 1 0%. 使得项目具备可伸缩性，并设置 flex basis 为0，柔性容器依据各弹性项目的弹性因子按比例分配自由空间。
缺省情况下，弹性项目将不会收缩到小于其最小内容尺寸（最长单词或固定尺寸元素的长度）。你可以使用min-width或min-height来改变这一点。
flex速写属性是我们推荐使用的方式，但是你也可以使用单独的属性普通写法。
flex-grow 属性
flex-grow: <number>
设置弹性生长因子为number值，负数无效。
flex-shrink 属性
flex-shrink: <number>
设置弹性收缩因子为number值，负数无效。
flex-basis 属性
flex-basis: content | <'width'>
设置弹性基准，可取值为：和宽高值一样的尺寸定义，或'content'关键词。
- auto
- 当在一个柔性项目中指定时，自动关键字检索主大小属性的值作为所使用的柔性基础。如果这个值是自动的，那么所使用的值是内容。 在弹性项目中，auto关键值表示从main size属性获取基准值，如果main size属性也是auto，则使用'content'。
- content
- 表示基于该弹性项目的内容自动调整大小。
注意，在弹性布局最初的规范中，不存在该取值。因此，一些旧的浏览器实现将不支持它。可以使用auto值连同一个auto的main size（宽度或高度）来实现相同效果。
- <‘width’>
- 对于其他取值，flex-basis被解析为横向书写模式下的宽度。百分比的取值参照弹性项的包容块（也就是其所在的弹性容器），而如果包容块的尺寸未定义，结果和auto的main size一样。 类似的，flex-basis确定content box的尺寸，除非通过 box-sizing [CSS3UI] 指定。