Flex 布局:项目的属性
Flex 容器内的子元素叫做容器的项目(item),通过设置 Flex 容器的 CSS 可以统一设置项目的排列顺序和对齐方式,通过项目的 CSS 则可以控制单个项目的缩放、排列顺序、对齐方式等。
order
order
,设置 item 的排列优先级,默认为0
,数字小越先排列,可为负。
如下图,a 方块order:1
,所以排到了最后。
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
。
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
。
flex-basis
flex-basis
,设置 item 在主轴上占据的空间,当设置flex-direction:row
时,效果是重写了 item 的宽,当设置flex-direction:column
时,效果则是重写了 item 的高。
flex
flex
是flex-grow
、flex-shrink
、flex-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 方块单独对齐到了交叉轴的起点。