CSS flex 布局(入门)- align-content 多轴线对齐

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

align-content 跟主轴对齐类似。

div{
	display: flex;
	flex-flow:row wrap;
	align-content: center;
}
  • stretch:轴线占满整个交叉轴(默认)。
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。
  • space-evenly :项目之间间隔相等,最边缘间隔等于项目之间的间隔。
align-content 多轴线对齐 7-1

兼容性 :

属性 IE Chrome Firefox Safari Opera
align-content 11.0 21.0 28.0 7.0 -webkit-
9.0
12.1

JavaScript 语法:

object.style.alignContent="space-between";