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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iefreer/article/details/50776127

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

展开阅读全文

没有更多推荐了,返回首页