CSS align-items 属性
更多“自己尝试”的例子见下文。
定义和用法
align-items
属性指定了 flexbox 或 grid 容器内项目的默认对齐方式。
- 在 flexbox 容器中,flex items 沿交叉轴对齐,交叉轴默认是垂直的(与 flex-direction 相反)。
- 在 grid 容器中,grid items 沿块方向对齐。对于英文页面,块方向是向下,内联方向是左到右。
要使此属性产生任何对齐效果,项目需要在适当方向上有可用的空间。
提示:使用每个项目的 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 和 grid 项目,其行为类似于 'stretch';对于具有已定义块尺寸的 grid 项目,其行为类似于 'start'。 | 演示 ❯ |
stretch | 项目被拉伸以适应容器 | 演示 ❯ |
center | 项位于容器的中心 | 演示 ❯ |
flex-start | 项位于容器的起始位置 | 演示 ❯ |
flex-end | 项位于容器的末尾位置 | 演示 ❯ |
start | 项目在各自的 grid 单元块的起始位置对齐 | |
end | 项目在各自的 grid 单元块的结束位置对齐 | |
baseline(基线) | 项目根据容器的基线位置对齐 | 演示 ❯ |
initial | 将此属性设置为其默认值。阅读关于initial | |
inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
绝对定位示例
对于绝对定位的 grid 项目,项目在每个 grid 单元块的结束位置对齐
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
自己动手试一试 »
相关页面
CSS 教程: CSS Grid
CSS 教程:CSS Flexbox
CSS 参考:align-content 属性
CSS 参考:align-self 属性
CSS 参考:justify-content 属性
CSS 参考:justify-items 属性
CSS 参考: justify-self 属性
HTML DOM 参考:alignItems 属性