Flexbox深入浅出系列之Flex项目属性(5)

Flex容器中的项目的相关属性有以下6个：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性

order属性定义项目的排序顺序。数值越小，排列越靠前。

.item{
    order:<integer>
}

注意：order属性默认为0，可以为负数

案例：order

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，就是如果存在剩余空间，也不放大。

.item{
    flex-grow:<number>;
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则为2的占据剩余空间比为1的大一倍。

案例：flex-grow

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item{
    flex-shrink:<number>;
}

如果所有项目的flex-shrink属性都为1，当空间不足的时候，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

注意：flex-shrink不能为负

案例：flex-shrink

flex-basis属性

flex-basis属性定义了在分配偶遇空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item{
    flex-basis:<length>| auto;
}

它可以设为跟width或height属性一样的值(像300px)，则项目将占据固定空间。

案例：flex-basis

flex属性

flex属性是flex-grow、flex-shrink、flex-basis的缩写，默认值为0 1 auto。

.item{
    flex:none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

这个属性有两个快捷键值：auto (1 1 auto) 和 none(0 0 auto)

flex常见值：

• flex:0 auto,flex:initial与flex:0 1 auto相同。这是初始值。根据元素的widht/height属性决定元素的尺寸。(如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。)当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可伸缩至其最小值。

• flex:auto与flex:1 1 auto相同。根据width/height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间。如果所有项目均为flex:auto、flex:initial或者flex:none，则在项目尺寸决定后，剩余的正空间会被平分给flex:auto的项目。

• flex:none与flex:0 0 auto相同。根据width/height属性决定元素的尺寸，但是完全不可伸缩。其效果与initial类似但即使在空间不够而溢出的情况下，伸缩项目也不能收缩。

• flex:number与flex:1 0px相同。该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器的所有项目都使用此模式，则它们的尺寸会正比于指定的伸缩比率。

注意：

• 建议使用缩写属性,这样可以防止浏览器推算相关值。
• flex最后两个属性可选
• 默认状态下，伸缩项目不会收缩至比其最小内容尺寸更小，我们可以通过设置min-width或者min-height属性来改变这个默认状态。

案例：flex

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承元素的align-items属性，如果没有父元素，则等同于stretch。

.item{
    align-self:auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

案例：align-self