CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例

弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 （对于匿名弹性项目，align-self总是匹配对应弹性容器的align-items的值。）

如果弹性项的cross-axis外边距是auto，align-self属性没有效果。

align-items和align-self的语法如下：

align-self属性取值auto时，将计算为其父元素的align-items值，或者为stretch如果没有父元素的话。对齐属性的取值定义如下：

flex-start
弹性项的cross-start margin的边紧挨着该行的cross-start的边（一般来说，就是挨着弹性容器顶部）。
flex-end
弹性项的cross-end margin的边紧挨着该行的cross-end的边（一般来说，就是挨着弹性容器底部）。
center
弹性项的margin box在该行的cross axis上居中（垂直居中对齐）。（如果该弹性行的cross size小于弹性项，将在两个方向上同时溢出。）
baseline
如果弹性项的行内轴（inline axis）和垂直轴（cross axis）一致，该值等同于flex-start。否则，它参与基线对齐（baseline alignment）：所有参与的弹性项按基线对齐，而基线和cross-start margin的边距离最大的项目被放在该行cross-start的边上（一般来说，就是基线和容器顶部距离最大的项目被定位在最上边）。
stretch
如果弹性项的垂直尺寸（cross size）属性（一般来说，就是高度）是auto，并且没有垂直外边距（cross-axis margin）是auto的，该弹性项被拉伸以适应容器高度， 其所使用的值是使项目的外边框（margin box）的垂直尺寸尽可能接近和行相同的尺寸，并依然遵循min-height/min-width/max-height/max-width属性的限制。 
注意：如果弹性容器的高度被限制，该值可能会导致该项的内容溢出。
弹性项的顶部挨着容器的顶部。

上图包含5个例子，每个例子的弹性容器中包含4个不同颜色的弹性项目，最下面的弹性项目带有文本基线。

该图很直观的演示了这些取值的效果和差异。我们可以通过在线实例代码来测试这个属性：

http://wow.techbrood.com/fiddle/17130

by iefreer