CSS flex布局之 align-items 属性

align-items 设置在容器上。属性决定项目在交叉轴(垂直)上如何对齐。

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

alignitems.jpg

图一

具体的对齐方式与排列方向有关,假设交叉轴从上到下,它可能的值有:

  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • flex-start :交叉轴的起点对齐。
  • flex-end :交叉轴的终点对齐。
  • center :交叉轴的中点对齐。
  • baseline :项目的第一行文字的基线对齐。

JavaScript 语法:

object.style.alignItems="center"