HTML5垂直弹性布局,CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例_html/css_WEB-ITnose...

弹性项目可以按弹性容器当前行的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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网