CSS flex 布局(入门)- align-items 交叉轴对齐

align-items 属性设置在容器上,定义项目在交叉轴上对齐方式。

div{
	display: flex;
	flex-flow:row wrap; /* 水平排列,换行 */
	align-items:center; /* 交叉轴居中对齐 */
}
  • stretch :如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)。
  • flex-start :交叉轴的起点对齐。
  • flex-end :交叉轴的终点对齐。
  • center :交叉轴的中点对齐。
  • baseline :项目的第一行文字的基线对齐。
align-items:center 交叉轴对齐 6-1

具体对齐方式与项目的排列方向有关,具体查看实例

兼容性 :

属性 IE Chrome Firefox Safari Opera
align-items 11.0 21.0 20.0 7.0 -webkit-
9.0
12.1

JavaScript 语法:

object.style.alignItems="center";