概述
CSS align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。
| 初始值 | stretch |
|---|---|
| 适用元素 | flex containers |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | as specified |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
更多属性和信息参见使用CSS弹性框。
语法
/* 对齐到侧轴起点 */ align-items: flex-start; /* 对齐到侧轴终点 */ align-items: flex-end; /* 在侧轴上居中 */ align-items: center; /* 与基准线对齐 */ align-items: baseline; /* 拉伸元素以适应 */ align-items: stretch; align-items: inherit;
取值
flex-start- 元素向侧轴起点对齐。
flex-end- 元素向侧轴终点对齐。
center- 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
baseline- 所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
stretch- 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
-
语法格式
flex-start | flex-end | center | baseline | stretch
规范
| 规范 | 状态 | 说明 |
|---|---|---|
| CSS Flexible Box Layout Module align-items |
Candidate Recommendation |
浏览器兼容性
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基础支持 | 21.0-webkit | 18.0 (18.0) (behind a pref) [1] 20.0 (20.0) |
11.0 [2] | 12.10 | 7.0-webkit |
| 特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基础支持 | 4.4 | ? | ? | 未实现 | 12.10 | 7.0-webkit |
[1] 用户需要访问about:config并将layout.css.flexbox.enabled设置为true以在Firefox 18和19中使用弹性框。从Firefox 28开始支持多行弹性框。
[2] 在Internet Explorer 10到11中，如果列式弹性元素具备align-items属性并且其内容过大，那么会溢出容器而不会撑开。12以上没有这个问题。更多信息可以查看Flexbug #2 。