CSS flex布局之 align-content 属性

align-content 设置在容器上。属性定义了多根轴线的对齐方式。当项目只有一根轴线时,属性不起作用。

div{
	display: flex;
	align-content: center;
}

aligncontent.jpg

图一

它可能的值有:

  • stretch(默认):轴线占满整个交叉轴。
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。

JavaScript 语法:

object.style.alignContent="space-between"