flex布局justify-content属性和align-items,align-self属性

作者: cheng 发布时间: 2019-10-11 浏览: 69 次 编辑

justify-content(在父元素设置)

设置弹性盒子元素在主轴(横轴)的对齐方式。

取值:

justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐,后面的元素接着第一个元素进行排列。
  • flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。
  • center:整体居中显示。
  • space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
  • space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。


align-items, align-self

设置弹性盒子元素在垂直方向上(纵轴)的对齐方式。其中align-items属性用于弹性容器,而align-self用于弹性项目。

align-items: flex-start | flex-end | center | baseline | stretch;
align-self: auto | flex-start | flex-end | center | baseline | stretch;