Flexbox 的对齐机制建立在两条相互垂直的轴线上：主轴和交叉轴。主轴由 flex-direction 属性决定，默认值是 row，即水平方向从左到右，此时交叉轴就是垂直方向。如果改成 column，主轴变为垂直从上到下，交叉轴则变成水平方向。这意味着同一个对齐属性在不同 flex-direction 下作用的方向完全不同，很多开发者遇到“为什么改变方向后对齐就反了”的问题，根源就在这里。理解这一点是掌握 Flex 对齐方式的前提。
容器上的对齐属性可以分成三类：控制主轴分布的 justify-content、控制交叉轴单行对齐的 align-items、以及控制多行交叉轴分布的 align-content。另外还有一个作用于单个项目的 align-self，用来覆盖容器级的 align-items。下面分别从主轴和交叉轴两个维度深入分析每个属性的取值和实际应用场景。
主轴对齐：justify-content 的六种取值
justify-content 负责将弹性项目沿主轴方向进行排列。默认值是 flex-start，所有项目从主轴起点开始依次排列，终点留白。第二个取值 flex-end 则相反，项目整体靠向主轴终点。第三个取值 center 让项目整体在主轴方向上居中，两侧空间相等。这三个取值相对直观，但它们的共同特点是只处理多余空间的分配，不改变项目之间的间距。
真正让导航栏等布局得心应手的是另外三个取值：space-between、space-around 和 space-evenly。其中 space-between 将第一个项目放在起点，最后一个项目放在终点，中间的项目均匀分布，项目之间的间距相等。这是实现经典的两端对齐布局最常用的方案，典型场景就是网站顶部导航：logo 在左、菜单在右、中间留白。例如设置如下样式即可轻松完成：
.nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
}
.nav .logo { /* 左侧 logo */ }
.nav .menu { display: flex; gap: 16px; }
space-around 则给每个项目两侧都分配相等的空间，导致项目之间的间距是项目与容器边缘间距的两倍，视觉上项目会分散得更开，但边缘留白较小。而 space-evenly 保证所有间距完全相等，包括容器边缘与第一个、最后一个项目之间的间距。两者区别比较微妙：当只有三个项目时，space-around 会让中间空隙明显大于两侧，而 space-evenly 则完全均匀。在实际项目中，如果需要在卡片列表内部让每个卡片之间的空隙和卡片与容器边缘的空隙一致，使用 space-evenly 会更合适。
需要注意的是，justify-content 只在主轴方向有空余空间时才生效。如果所有项目的尺寸总和已经超过容器宽度，这些属性将没有任何视觉效果，项目会按照默认顺序溢出。因此在使用之前，最好确认容器宽度足够容纳项目，或者配合 flex-wrap 换行来避免溢出。
交叉轴对齐：align-items 与 align-self
align-items 控制所有弹性项目在交叉轴上的对齐方式，默认值是 stretch，也就是拉伸。如果项目没有显式设置高度（当主轴为水平方向时），它们会被拉伸到容器的高度，使得所有项目等高。这种默认行为在很多场景中非常有用，比如一排放置多个卡片，即使卡片内容多少不同，也能自动获得相同的高度，视觉上更加整齐。
除了 stretch，align-items 还支持 flex-start、flex-end、center 和 baseline。其中 center 是最常用的垂直居中方案。假设有一个固定高度的容器，里面放一个按钮组，想要按钮在垂直方向上居中，只需给容器设置 display: flex; align-items: center;，无需再使用传统的 line-height 或 vertical-align 技巧。例如：
.banner {
display: flex;
align-items: center;
height: 300px;
background: #f5f5f5;
}
.banner .btn-group {
margin-left: auto;
}
baseline 取值则适用于文本对齐场景，它会根据项目内部第一行文本的基线来对齐，即使项目高度不同，文字底部也能保持在同一条线上。比如一排放置不同尺寸的图标和说明文字时，使用 align-items: baseline 可以让文字部分对齐得更自然。
如果只想让某一个项目在交叉轴上采用不同的对齐方式，而不影响其他项目，可以使用 align-self。该属性作用于单个弹性项目，取值与 align-items 完全相同，并且优先级更高。典型的应用是：在一个高度确定的侧边栏中，底部通常要放置一个“退出登录”按钮，而顶部是导航菜单，此时给按钮设置 align-self: flex-end，就能让它独自贴底，而其他菜单项保持默认的 stretch 或 flex-start。这种局部覆盖的能力让布局调整更加灵活，避免了为单个项目额外嵌套容器的麻烦。
多行对齐：align-content 的使用条件与场景
当容器设置了 flex-wrap: wrap 并且项目数量足够多、形成了多行时，align-content 才开始发挥作用。它控制的是多行整体在交叉轴方向上的分布，而不是单个项目。如果只有一行，设置 align-content 不会有任何效果，这一点经常被误解。默认值是 stretch，每一行都会被拉伸以填满交叉轴空间，导致行与行之间没有空隙。
align-content 的取值与 justify-content 类似，包括 flex-start、flex-end、center、space-between、space-around 和 space-evenly。实际开发中，center 常用于将多行内容整体在垂直方向上居中。例如一个图片画廊，容器高度固定，内部图片自动换行，希望所有行整体在容器垂直居中，而不是从顶部开始排列。此时给容器设置 display: flex; flex-wrap: wrap; align-content: center; 就能实现。而 space-between 则适用于将多行均匀分布在容器中，第一行贴顶、最后一行贴底，中间行平分空隙。
下面是一个常见的多行卡片布局示例，容器高度固定为 500px，内部卡片宽度为 200px 并允许换行，要求整体在垂直方向均匀分布：
.card-grid {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 500px;
background: #fafafa;
}
.card-grid .card {
width: 200px;
height: 120px;
background: #fff;
border: 1px solid #ddd;
}
需要注意的是，align-content 作用于行而不是项目，因此当每行高度不一致时（比如项目设置了不同高度且 align-items 不是 stretch），行的边界由该行中最高的项目决定。理解了这一点，在处理多行弹性布局时就能更准确地预测最终效果。此外，如果容器只有一行但设置了 align-content，该属性会被忽略，此时唯一生效的交叉轴对齐属性是 align-items。
常见问题排查：为什么对齐属性没有生效？
实际开发中经常遇到设置了 justify-content: center 但元素并没有居中的情况，排查思路通常从三个方面入手。第一，确认容器是否真的建立了 Flex 格式化上下文，也就是是否设置了 display: flex 或 display: inline-flex。如果忘了写这个声明，后面的所有 Flex 属性都会被浏览器忽略，元素仍然按照块级或行内格式排列。
第二，检查主轴方向是否符合预期。比如想实现水平居中，但容器设置了 flex-direction: column，那么主轴变成了垂直方向，此时 justify-content: center 实现的是垂直居中，水平居中需要用 align-items: center。这种方向混淆是最常见的错误来源。建议在调试时先确认 flex-direction 的值，再决定使用哪个对齐属性。
第三，如果使用了 margin: auto 与对齐属性同时存在，需要注意 auto 外边距会消耗掉所有多余空间，从而覆盖对齐属性的效果。例如在一个水平 Flex 容器中，给某个项目设置 margin-left: auto 后，该项目会被推到最右侧，即使容器设置了 justify-content: space-between，其他项目的分布也可能不再是预期的均匀效果。这种情况下应该明确选择一种对齐策略，避免混用。
还有一个容易忽略的点：当容器本身没有固定高度时，交叉轴上的 align-items: center 看似无效。这是因为容器高度由内容撑开，项目在交叉轴方向上没有多余空间可供分配，自然看不出居中效果。此时需要给容器设置一个具体的高度，或者使用 min-height 提供足够的空间，对齐属性才能真正发挥作用。理解这些底层逻辑，比死记硬背属性值重要得多。