align-self 单个项目交叉轴对齐属性

最后更新：2026-09-13

align-self align-self 单个项目交叉轴对齐属性

align-self 属性用于设置单个弹性项目在交叉轴上的对齐方式，覆盖容器 align-items 的默认设置。默认值为 auto，表示继承容器的 align-items 值。通过该属性，可以让某个项目独立于其他项目进行对齐，例如让一个项目居中而其他项目顶部对齐，这在导航栏和卡片布局中非常实用。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

align-self: auto | normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;

⚙️ 取值

值	类型	描述
`auto \| normal \| stretch \| flex-start \| flex-end \| center \| baseline`	关键字	单个项目交叉轴对齐

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
align-self	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： align-self: auto 表示继承容器的 align-items 设置。如果想让单个项目恢复默认对齐，设置 align-self: auto 即可。

重要： align-self 仅在弹性布局（Flexbox）和网格布局（Grid）中生效。在弹性布局中作用于交叉轴，在网格布局中作用于块轴。

❓ 常见问题

Qalign-self 和 align-items 有什么区别？

Aalign-items 设置在弹性容器上，统一指定所有子项在交叉轴上的对齐；align-self 设置在单个弹性项目上，覆盖该项目的默认对齐值，默认值为 auto（继承容器的 align-items）。align-self 的优先级高于 align-items，常用于让某个项目单独居中对齐而其他项目保持默认。

Qalign-self: baseline 什么时候使用？

Abaseline 让所有子项的文字基线对齐，适合文字大小不一的场景，视觉更整齐。例如导航栏同时包含大标题和小菜单项、时间轴中日期与描述并排时，用 align-self: baseline 能让文字底部基线统一，比 center 或 flex-end 更精细。

Qflex-direction: column 时 align-self 控制哪个方向？

Aalign-self 始终作用于交叉轴。主轴为 row 时交叉轴是垂直方向，控制垂直位置；改 column 后交叉轴变水平，align-self 转而控制水平位置。判断方法：先确定 flex-direction，交叉轴永远与主轴垂直。