flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
「flex
」属性可以用来指定可伸缩长度的部件:扩展比率、收缩比率,以及伸缩基准值。当一个元素是伸缩项目时,「flex
」属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则「flex
」属性没有效果。
<‘flex-grow
’>
此 <number> 部件可以用来设置「flex-grow
」长写并指定扩展比率,也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略了此部件,则它会被设为「1
」。
<‘flex-shrink
’>
此 <number> 部件可以用来设置「flex-shrink
」长写并指定收缩比率,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略了此部件,则它会被设为「1
」。在收缩的时候收缩比率会以伸缩基准值加权。
<‘flex-basis
’>
与「width
」属性使用相同的值的此部件可以用来设置「flex-basis
」长写并指定伸缩基准值,也就是根据可伸缩比率计算出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在「flex
」缩写省略了此部件,则「flex-basis
」的指定值是长度零。
若「flex-basis
」的指定值是「auto
」,则伸缩基准值的指定值是元素主轴长度属性的值。(这个值可能是关键字「auto
」,代表元素的长度取决于其内容。)