CSS align-items 属性
下面有更多“自己尝试”示例。
定义和用法
The align-items 属性指定 flexbox 或 grid 容器内项目的默认对齐方式。
- 在 flexbox 容器中，flexbox 项目在横轴上对齐，默认情况下是垂直的（与 flex-direction 相反）。
- 在网格容器中，网格项目在块方向上对齐。对于英文页面，块方向向下，内联方向从左到右。
为了使此属性具有任何对齐效果，项目需要在其周围有适当方向的可用空间。
提示：使用 align-self 属性以覆盖 align-items 属性。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS 语法
align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit;
属性值
| 值 | 描述 | 播放它 |
|---|---|---|
| normal | 默认。对于 flexbox 和网格项目，行为类似于“stretch”，或者对于具有定义块大小的网格项目，行为类似于“start”。 | 演示 ❯ |
| stretch | 项目被拉伸以适应容器 | 演示 ❯ |
| center | 项目位于容器的中心 | 演示 ❯ |
| flex-start | 项目位于容器的开头 | 演示 ❯ |
| flex-end | 项目位于容器的结尾 | 演示 ❯ |
| start | 项目位于其各个网格单元的开头，在块方向上 | |
| end | 项目位于其各个网格单元的结尾，在块方向上 | |
| baseline | 项目位于容器的基线 | 演示 ❯ |
| initial | 将此属性设置为其默认值。 了解有关initial | |
| inherit | 从其父元素继承此属性。 了解有关inherit |
更多示例
绝对定位示例
项目在块方向上的每个网格单元的结尾对齐，用于绝对定位的网格项目
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
自己尝试 »
相关页面
CSS 教程： CSS 网格
CSS 教程： CSS flexbox
CSS 参考： align-content 属性
CSS 参考： align-self 属性
CSS 参考： justify-content 属性
CSS 参考： justify-items 属性
CSS 参考： justify-self 属性
HTML DOM 参考： alignItems 属性
