在flex弹性布局的使用过程中，我们通常会通过align-items属性设置容器内所有子项在侧轴（默认是垂直方向）上的统一对齐方式，但在实际业务里，经常会出现某个子项需要和其他子项对齐规则不同的需求，比如其他子项垂直居中，某一个子项需要靠顶部对齐，这时候就可以使用align-self属性单独控制单个子项的侧轴对齐表现。
align-self属性基本说明
align-self是flex子项的专属属性，它的作用是可以覆盖flex容器设置的align-items属性，单独定义当前子项在侧轴上的对齐方式，其取值和align-items的取值基本一致，具体可选值如下：
- stretch：默认值，子项会被拉伸以适应容器的侧轴高度，如果子项没有设置固定高度，会占满容器侧轴空间
- flex-start：子项在侧轴起点对齐，默认垂直方向下靠顶部对齐
- flex-end：子项在侧轴终点对齐，默认垂直方向下靠底部对齐
- center：子项在侧轴居中对齐
- baseline：子项在侧轴基线对齐，通常和文字基线相关
基础使用示例
下面通过一个简单的示例演示align-self的使用效果，首先创建一个flex容器，设置所有子项默认垂直居中，然后给第三个子项单独设置靠底部对齐：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self示例</title>
<style>
.flex-container {
display: flex;
align-items: center; /* 所有子项默认垂直居中 */
height: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.flex-item {
width: 80px;
height: 60px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 60px;
margin: 0 10px;
}
/* 第三个子项单独设置靠底部对齐 */
.flex-item:nth-child(3) {
align-self: flex-end;
background-color: #2196F3;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">子项1</div>
<div class="flex-item">子项2</div>
<div class="flex-item">子项3</div>
<div class="flex-item">子项4</div>
</div>
</body>
</html>
运行上述代码后，可以看到子项1、2、4都垂直居中在容器中，只有子项3靠容器的底部对齐，这就是align-self单独控制单个子项对齐的效果。
不同取值的效果对比
我们可以通过调整单个子项的align-self取值，查看不同的对齐表现，以下是不同取值的效果说明：
| align-self取值 | 对齐效果 |
|---|---|
| flex-start | 子项靠侧轴起点对齐，垂直方向下靠顶部 |
| center | 子项在侧轴居中，和容器align-items为center效果一致 |
| flex-end | 子项靠侧轴终点对齐，垂直方向下靠底部 |
| stretch | 子项拉伸占满侧轴空间，若子项无固定高度会生效 |
| baseline | 子项按第一行文字基线对齐 |
注意事项
使用align-self属性时需要注意以下几点：
- align-self只对flex子项生效，普通容器的子元素设置该属性不会有任何效果
- 如果flex容器的侧轴方向被
flex-direction属性修改，比如设置为flex-direction: column，那么侧轴会变成水平方向，此时align-self控制的是水平方向的对齐 - align-self的优先级高于容器的align-items属性，只要子项设置了align-self，就会按照子项的设置来对齐，忽略容器的统一规则
实际业务场景应用
在实际开发中，align-self非常适合处理个性化对齐需求，比如卡片布局中，卡片底部的操作按钮需要靠底部对齐，而其他内容垂直居中，就可以给操作按钮所在的子项设置align-self: flex-end，不需要修改整个卡片容器的对齐规则，减少样式冲突的可能。
再比如导航栏中，大部分导航项水平居中，但是登录按钮需要靠右侧对齐，这时候如果导航栏是flex容器，也可以给登录按钮设置margin-left: auto配合align-self调整垂直方向的对齐，实现更灵活的布局效果。
flexalign_selfCSS布局弹性盒子修改时间：2026-07-19 02:45:23