目录

CSS align-items 属性

❮上一节完整的CSS参考下一节❯

示例

将灵活 <div> 元素的所有项目居中对齐：

div {
display: flex;
align-items: center;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个align-items属性指定 Flexbox 或网格容器内项目的默认对齐方式。

在 Flexbox 容器中，Flexbox 项目在横轴上对齐，默认情况下，横轴是垂直的（与 flex-direction 相反）。
在网格容器中，网格项在块方向上对齐。对于英文页面，块方向是向下，内联方向是从左到右。

为了使此属性具有任何对齐效果，项目需要在适当的方向上围绕其自身留出可用空间。

提示：使用align-self要覆盖的每个项目的属性align-items属性。

展示演示❯

默认值：	普通的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.alignItems="center"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
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;

属性值

Value	Description	Play it
normal	Default. Behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.	Demo ❯
stretch	Items are stretched to fit the container	Demo ❯
center	Items are positioned at the center of the container	Demo ❯
flex-start	Items are positioned at the beginning of the container	Demo ❯
flex-end	Items are positioned at the end of the container	Demo ❯
start	Items are positioned at the beginning of their individual grid cells, in the block direction
end	Items are positioned at the end of the their individual grid cells, in the block direction
baseline	Items are positioned at the baseline of the container	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

项目位于容器的开头：

div {
display: flex;
align-items: flex-start;
}

亲自试一试 »

示例

物品位于容器的末端：

div {
display: flex;
align-items: flex-end;
}

亲自试一试 »

示例

项目位于容器的基线处：

div {
display: flex;
align-items: baseline;
}

亲自试一试 »

示例

物品被拉伸以适合容器：

div {
display: flex;
align-items: stretch;
}

亲自试一试 »

带网格的示例

项目在块方向上每个网格单元的开头对齐：

#container {
display: grid;
align-items: start;
}

亲自试一试 »

绝对定位示例

对于绝对定位的网格项目，项目在块方向上的每个网格单元的末尾对齐：

#container {
  display: grid;
  position: relative;
  align-items: end;
}

#container > div {
  position: absolute;
}

亲自试一试 »

相关页面

CSS教程：CSS 网格

CSS教程：CSS 弹性盒

CSS 参考：对齐内容属性

CSS 参考：自我对齐属性

CSS 参考：调整内容属性

CSS 参考：证明项目属性

CSS 参考：证明自我属性

HTML DOM 参考：对齐项目属性

❮上一节完整的CSS参考下一节❯