css flex布局 —— 容器属性 align-items

align-items 属性定义项目在交叉轴上如何对齐。
语法：

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

属性值

align-items 属性有5个值，如下：

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

flex-start

实例：

"container">
  
1
  
2
  
3
  
4
  
5


注意: Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。
注意: Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。

页面效果：

flex-end

实例：

  align-items: flex-end;

页面效果：

center

实例：

  align-items: center;

页面效果：

baseline

实例：

"container">
  
1
  

	  
111
	  
222
	  
333
	  
444
  
  
3
  

	  
111
	  
222
	  
333
  
  
5


注意: Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。
注意: Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。

页面效果：

可以看到，项目的第一行文字的基线是对齐的：

stretch

实例：

"container">
  
1
  
2
  
3
  
4
  
5


注意: Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。
注意: Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。

页面效果：