css3弹性盒布局之主轴对齐
今天来说一下如何来定义弹性盒模型的对齐方式,对齐方式有三种,分别是:1、主轴对齐;2、侧轴对齐;3、伸缩行对齐;
主轴对齐
justify-content用来定义伸缩项目沿着主轴线的对齐方式,属性使用于伸缩容器,当一行上的所有伸缩项目都不能伸缩或者可伸缩但是已经达到了最大的长度时,才会对多余的空间进行分配,当项目溢出某一行时。属性也会在项目的对齐上施加控制。
属性值如下:
flex-star:默认值,伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:伸缩项目会平均地分布在行里,第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行中最终点的位置。
space-around:伸缩项目会评论地分布在行里,两端保留各一半空间。