首页  >  属性 Properties  >  伸缩盒(Flexible Box)(新)  >  align-self

版本 : CSS3 align-self

语法:

align-self:auto | flex-start | flex-end | center | baseline | stretch

默认值auto

适用于:flex子项

继承性:无

动画性:是

计算值:如果值为「auto」,则计算值为父元素的 <' align-items '> 值,否则为指定值。

取值:

auto:
如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:
如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:
如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

说明:

定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
  • 对应的脚本特性为alignSelf

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-10.02.0-21.04.0-20.06.015.0+-webkit-6.0-6.12.1-4.318.0-19.0
11.0+22.0+21.0+-webkit-6.1+-webkit-17.0+7.0+-webkit-4.4+20.0+-webkit-
29.0+9.0+9.0+28.0+