css布局中align-self控制单个元素对齐-css教程-PHP中文网

css布局中align-self控制单个元素对齐

P粉602998670

发布： 2025-10-11 09:11:01

原创

838人浏览过

align-self用于单独控制弹性子元素在交叉轴上的对齐方式，可覆盖align-items设置。其常用值包括auto、flex-start、flex-end、center、stretch和baseline，适用于需要微调个别元素位置的场景，如卡片布局或表单对齐。该属性仅在父容器为display: flex或inline-flex时生效，能精准实现单个元素的对齐控制而不影响整体布局。

css布局中align-self控制单个元素对齐

align-self 是 CSS Flexbox 布局中的一个属性，用于单独控制某个弹性子元素在交叉轴（cross axis）上的对齐方式，而不影响其他子元素。它会覆盖容器上设置的 align-items 属性对该元素的影响。

align-self 的常用取值

以下是 align-self 支持的主要值：

auto：默认值，继承父容器的 align-items 设置，若无父容器则为 stretch
flex-start：元素在交叉轴起点对齐
flex-end：元素在交叉轴终点对齐
center：元素在交叉轴居中对齐
stretch：元素拉伸以填满容器（忽略 margin）
baseline：元素按基线对齐，常用于文本对齐场景

实际使用示例

假设有一个 flex 容器，多数子项居中，但想让其中一个顶部对齐：

.container {
  display: flex;
  align-items: center; /* 所有子项默认居中 */
  height: 200px;
}
<p>.item-special {
align-self: flex-start; /<em> 单独控制这个元素靠上对齐 </em>/
}</p>

登录后复制

在这个例子中，除了 .item-special 会贴着容器顶部对齐外，其余子元素仍保持居中。