css堆叠款式表flex延展性盒实体模型(下)

<

下列6个特性设定在新项目上。

order flex-grow flex-shrink flex-basis align-self  order特性

order特性界定新项目的排序次序。标值越小,排序越靠前,默认设置为0。
赋值:整数金额(能够取负数)

flex-grow特性

flex-grow特性界定新项目的变大占比,默认设置为0,即假如存有剩下室内空间,都不变大。
赋值:标值

假如全部新项目的flex-grow特性都为1,则他们将等分剩下室内空间(假如有得话)。

假如一个新项目的flex-grow特性为2,别的新项目都为1,则前面一种占有的剩下室内空间将比别的项多一倍。

flex-shrink特性

赋值:标值

flex-shrink特性界定了新项目的变小占比,默认设置为1,即假如室内空间不够,此项目将变小。

假如全部新项目的flex-shrink特性都为1,当室内空间不够时,都将等占比变小。

假如一个新项目的flex-shrink特性为0,别的新项目都为1,则室内空间不够时,前面一种不变小。

flex-basis特性

flex-basis特性界定了在分派过剩室内空间以前,新项目占有的主轴室内空间(main size)。访问器依据这一特性,测算主轴是不是有过剩室内空间。它的默认设置数值auto,即新项目的原本尺寸。

它能够设成跟width或height特性一样的值(例如350px),则新项目将占有固定不动室内空间。

 flex特性

flex特性是flex-grow, flex-shrink 和 flex-basis的缩写,默认设置数值0 1 auto。后2个特性可选择。
该特性有2个便捷值:auto (1 1 auto) 和 none (0 0 auto)。

提议优先选择应用这一特性,而并不是独立写三个分离出来的特性,由于访问器会推算有关值。

align-self特性

align-self特性容许单独新项目有两者之间他新项目不一样的两端对齐方法,可遮盖align-items特性。默认设置数值auto,表明承继父原素的align-items特性,假如沒有父原素,则等同于于stretch。

该特性能够取6个值,除开auto,别的都和align-items特性彻底一致。

赋值:

auto 表明承继父原素的align-items特性,假如沒有父原素,则等同于于stretch flex-start交叉式轴的起始点两端对齐。 flex-end交叉式轴的起始点两端对齐。 center交叉式轴的中点两端对齐 baselin新项目的第一写作字的基准线两端对齐。 stretch假如新项目未设定高宽比或设成auto,将占满全部器皿的高宽比。