Flex 容器内的子元素叫做容器的项目(item),通过设置 Flex 容器的 CSS 可以统一设置项目的排列顺序和对齐方式,通过项目的 CSS 则可以控制单个项目的缩放、排列顺序、对齐方式等。

order

order,设置 item 的排列优先级,默认为0,数字小越先排列,可为负。
如下图,a 方块order:1,所以排到了最后。
item-order.png

flex-grow

当容器主轴有剩余空间时,通过flex-grow来设置 item 分配剩余空间的比例,默认为0,表示不分配,效果就是项目保持原来的尺寸。
如果其中一个 item 的值为1其他 item 值为0,值为1的会填满剩余的空间。
如果有一个为1,两个为2,一个为0,那么剩余空间平均分为五份,为1的占五分之一,为2的各占五分之二。

如下图,容器的宽度为 500px,容器内每个项目的宽度为 100px,此时容器剩余宽度为100px,flex-grow 的比例为1:2:2,按照比例将给 a 分配剩余宽度的五分之一,也就是20px,最终 a 的宽度变成了120px,同理 b 和 c 的宽度变成了140px
item-grow.png

flex-shrink

当容器主轴空间不足时,通过flex-shrink来设置 item 需要减去空间的比例,默认为1,表示减去的空间比例为 item 宽或高的比例。
也就是说,最终减去的比例是 flex-shrink 值的比例乘以 item 本身宽或高的比例。

例如下图 a、b、c 三个都需要减小,flex-shrink 比例为2:1:1,它们宽度的比也是2:1:1,所以最终比例4:1:1
item 总宽度超出了200px,按照比例 a 将减去200px的六分之四,也就是133.33px,最终 a 的宽度变成了66.66px,b 和 c 都减去200px的六分之一,也就是33.33px,最终宽度变成了66.66px
item-shrink.jpg

flex-basis

flex-basis,设置 item 在主轴上占据的空间,当设置flex-direction:row时,效果是重写了 item 的宽,当设置flex-direction:column时,效果则是重写了 item 的高。

flex

flexflex-growflex-shrinkflex-basis的缩写,默认0 1 auto对应前面三个属性的默认值。
另外auto等于1 1 auto,项目会伸长填充容器也会缩短适应容器,none等于0 0 auto,既不会伸长也不会缩短。

align-self

align-self,设置 item 在交叉轴上的对齐方式,覆盖容器里的align-items,达到单独设置某个项目交叉轴上对齐方式的效果。
如下图,单独设置了 a 方块align-self:flex-start,所以 a 方块单独对齐到了交叉轴的起点。
item-self.jpg

标签: CSS, Html5

添加新评论