css3弹性盒布局之主轴对齐

发布时间:2020-10-25 20:45:52 浏览量:1174 标签: css3 弹性布局

今天来说一下如何来定义弹性盒模型的对齐方式,对齐方式有三种,分别是:1、主轴对齐;2、侧轴对齐;3、伸缩行对齐;

主轴对齐

justify-content用来定义伸缩项目沿着主轴线的对齐方式,属性使用于伸缩容器,当一行上的所有伸缩项目都不能伸缩或者可伸缩但是已经达到了最大的长度时,才会对多余的空间进行分配,当项目溢出某一行时。属性也会在项目的对齐上施加控制。

属性值如下:

  1. flex-star:默认值,伸缩项目向一行的起始位置靠齐。

  2. flex-end:伸缩项目向一行的结束位置靠齐。

  3. center:伸缩项目向一行的中间位置靠齐。

  4. space-between:伸缩项目会平均地分布在行里,第一个伸缩项目在一行中的最开始位置,最后一个伸缩项目在一行中最终点的位置。

  5. space-around:伸缩项目会评论地分布在行里,两端保留各一半空间。



评论
登录后才可以进行评论哦! QQ登录
验证码
评论内容