Flexbox中align-items与align-self有什么区别_对齐属性详解

新闻中心 NEWS CENTER

2025-11-23

浏览次数：次

align-items用于统一设置容器内所有子项在交叉轴上的对齐方式，而align-self可单独调整某个子项的对齐，且优先级更高，能覆盖align-items的设置。

flexbox中align-items与align-self有什么区别_对齐属性详解

在使用 Flexbox 布局时，align-items 和 align-self 都用于控制 Flex 容器中项目在交叉轴（cross axis）上的对齐方式，但它们的作用范围和优先级不同。理解两者的区别，有助于更灵活地实现布局控制。

align-items 是应用于Flex 容器的属性，用来定义所有子元素在交叉轴上的默认对齐方式。它会影响容器内的每一个直接子项。

常见取值包括：

例如：

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

.container {
  display: flex;
  align-items: center; /* 所有子项在交叉轴上居中 */
}

这样，容器内所有子元素都会垂直居中（假设主轴为水平方向）。

align-self 是应用于Flex 子项的属性，允许单个项目覆盖 align-items 的设置，实现个性化的对齐效果。

它的可选值与 align-items 完全相同，如 flex-start、center、stretch 等。

例如：

.item1 {
  align-self: flex-start; /* 单独让这个项目顶部对齐 */
}

即使容器设置了 align-items: center，.item1 仍会按照自己的 align-self 设置进行顶部对齐。

align-self 的优先级高于 align-items。也就是说，当一个子项设置了 align-self，它将忽略容器的 align-items 规则，采用自己的对齐方式。

这类似于 CSS 中“具体优于一般”的原则 —— 容器设定的是通用规则，而子项可以自行决定是否打破这个规则。

假设有一个导航栏，大部分菜单项希望垂直居中，但其中一个“通知图标”希望与顶部对齐：

.n* {
  display: flex;
  align-items: center; /* 默认都居中 */
}
<p>.badge {
align-self: flex-start; /<em> 特殊处理，靠上对齐 </em>/
}</p>

这样就能在保持整体一致的同时，灵活调整个别元素的位置。

基本上就这些。掌握 align-items 和 align-self 的区别，能让你在 Flexbox 布局中更加得心应手。前者统一对齐，后者个别调整，配合使用效果最佳。

以上就是Flexbox中align-items与align-self有什么区别_对齐属性详解的详细内容，更多请关注其它相关文章！