[css] flex (old)

flex

none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
none：
    none关键字的计算值为: 0 0 auto
<' flex-grow '>：
    用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
    在「flex」属性中该值如果被省略则默认为「1」
<' flex-shrink '>：
    用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
    在收缩的时候收缩比率会以伸缩基准值加权
    在「flex」属性中该值如果被省略则默认为「1」
<' flex-basis '>：
    用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
    在「flex」属性中该值如果被省略则默认为「0%」
    在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。
    
    如果缩写「flex: 1」, 则其计算值为「1 1 0%」
    如果缩写「flex: auto」, 则其计算值为「1 1 auto」
    如果「flex: none」, 则其计算值为「0 0 auto」
    如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

 

flex-grow
<number>：用数值来定义扩展比率。不允许负值

默认值：0
设置或检索弹性盒的扩展比率。
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

 

flex-shrink
<number>：用数值来定义收缩比率。不允许负值
默认值：1
设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

 

flex-basis
<length> | <percentage> | auto | content

<length>：
    用长度值来定义宽度。不允许负值
<percentage>：
    用百分比来定义宽度。不允许负值
auto：
    无特定宽度值，取决于其它属性值
content：
    基于内容自动计算宽度

设置或检索弹性盒伸缩基准值。
如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间

 

flex-flow：<' flex-direction '> || <' flex-wrap '>

<' flex-direction '>：
    定义弹性盒子元素的排列方向。
<' flex-wrap '>：
    控制flex容器是单行或者多行。

复合属性。设置或检索弹性盒模型对象的子元素排列方式。

 

详细demo