DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
align-items
属性与 CSS 布局相关。 它影响元素在 Flexbox 和 Grid 布局中的对齐方式。
.container {
display: flex;
align-items: flex-start;
}
语法
align-items: flex-start | flex-end | center | baseline | stretch
align-items
属性定义了项目沿横轴(垂直于主轴)的默认布局行为。
想象一个水平的 flexbox 布局。 那个水平流动是主轴,所以 align-items 是与其相反的对齐方式,在垂直轴上。 请记住,当主轴改变时,横轴也会随之改变。
您可以将 align-items
视为横轴(垂直于主轴)的 justify-content
版本。
本文的其余部分主要关注 flexbox 而不是 grid。 这些概念仍然非常相似,但有一些差异。 例如,在 flexbox 中,轴可以改变,而在 grid 中则不能。 这会影响像 flexbox 这样的值,例如 flex-start
,而在 grid 中它只是 start
。
align-items
属性接受 5 个不同的值
flex-start
:项目的交叉起始边距边缘放置在交叉起始线上flex-end
:项目的交叉结束边距边缘放置在交叉结束线上center
:项目在横轴上居中baseline
:项目对齐,使它们的基线对齐stretch
(默认):拉伸以填充容器(仍然尊重 min-width/max-width)
下图有助于理解 flex 项目根据 align-items
值的布局方式。
演示
以下演示展示了 flex 项目根据 align-items
值的布局方式
- 红色列表设置为
flex-start
- 黄色列表设置为
flex-end
- 蓝色列表设置为
center
- 绿色列表设置为
baseline
- 粉色列表设置为
stretch
浏览器支持
align-items
在 flexbox 和 CSS Grid 中的使用方式存在浏览器支持差异。
Flex 布局
IE | Edge | Chrome | Firefox | Safari | Opera |
---|---|---|---|---|---|
11 | 全部 | 21-51 1 51+ | 20+ | 7-8 1 9+ | 12.1+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
7-8.4 1 9+ | 全部 | 全部 | 92+ | 12.1+ |
1 使用前缀
-webkit-
支持Grid 布局
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
全部 | 16+ | 52+ | 57+ | 10.1+ | 44+ |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
10.3+ | 全部 | 全部 | 全部 | 64+ |
更多信息
- CSS 弹性盒布局模块级别 1
- MDN 文档
- 高级跨浏览器 flexbox
- CSS-Tricks Flexbox 指南
- 使用 Flexbox
- 旧的 Flexbox 和新的 Flexbox
- 如何使用 CSS 网格属性来调整和对齐内容和项目 (DigitalOcean)
- 使用 Flexbox 在 CSS 中居中内容 (DigitalOcean)
Firefox 中有一个 align-items: baseline 的边缘情况错误。
https://bugzilla.mozilla.org/show_bug.cgi?id=1036404
非常感谢您
这个培训对我非常有用。
我有个问题,在 codepen 演示的“baseline”案例中,假设我想让第三个绿色方块与“5”对齐,而不是与 4 对齐。我该怎么做呢?
看起来
flex-end
现在只是end
我敢肯定,这个变化是在 CSS 盒子对齐模块级别 3 工作草案中做出的,还没有成为候选推荐。
恕我直言,它们并不相同。