align-items

Avatar of 34 Cross
34 Cross

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

align-items 属性与 CSS 布局相关。 它影响元素在 FlexboxGrid 布局中的对齐方式。

.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 值的布局方式。

来自 w3.org

演示

以下演示展示了 flex 项目根据 align-items 值的布局方式

  • 红色列表设置为 flex-start
  • 黄色列表设置为 flex-end
  • 蓝色列表设置为 center
  • 绿色列表设置为 baseline
  • 粉色列表设置为 stretch

浏览器支持

align-items 在 flexbox 和 CSS Grid 中的使用方式存在浏览器支持差异。

Flex 布局

IEEdgeChromeFirefoxSafariOpera
11全部21-51 1
51+
20+7-8 1
9+
12.1+
iOS SafariAndroid ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
7-8.4 1
9+
全部全部92+12.1+
来源:caniuse

1 使用前缀 -webkit- 支持

Grid 布局

IEEdgeFirefoxChromeSafariOpera
全部16+52+57+10.1+44+
iOS SafariAndroid ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
10.3+全部全部全部64+
来源:caniuse

更多信息