11.21 CSS 伸缩性(Flexibility)

弹性项目的伸缩性通过flex-*属性来定义

弹性布局赋予弹性项目可伸缩性,可以改变其宽度/高度,以填充可用空间。这通过设置flex属性来实现。

下面这个例子演示flex: auto属性值的效果。除了给每个弹性项目添加了flex: auto外,其余和上一章节中的例子一样。 第一行有60px的剩余空间,而所有项目具有相同的伸缩性(Flexibility),所以第一行的3个项目将平均分配剩余的空间,也就是获得20px的额外宽度, 这样最终是占据100px的宽度(含内外边距)。而第二行的单独项目将自我延展到占据整个行宽(300px)。

弹性容器将未使用的空间根据弹性项的弹性生长因子(flex grow factor)来按比例分配,或者根据它们的弹性收缩因子(flex shrink factor)来按比例收缩以防止溢出。

flex属性

flex属性是flex-*系列属性的速写方式,语法如下:

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

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
上图显示“绝对”弹性(从零开始)和“相对”弹性(从弹性项内容大小基准开始)之间的区别。这三个项目的弹性因子分别为:1,1,2。注意,弹性因子为2的项目生长速度为其余项目的2倍。

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] 指定。