align-items用于整体垂直对齐，margin-top:auto或margin-bottom:auto可使单个子元素脱离整体对齐，实现如底部定位等特殊布局需求。
在CSS Flex布局中，让子元素垂直对齐通常使用 align-items，而 margin 可以辅助实现更灵活的对齐或间距控制。两者结合能应对一些特殊布局需求。
1. align-items 控制整体垂直对齐
align-items 作用于 flex 容器，决定所有子元素在交叉轴（默认是垂直方向）上的对齐方式。
常用值包括：- flex-start：顶部对齐
- center：居中对齐
- flex-end：底部对齐
- stretch：拉伸填满容器（默认值）
示例：
.container {
display: flex;
align-items: center; /* 所有子元素垂直居中 */
}
2. margin 用于单个子元素微调或分离对齐
当需要某个子元素与其他子元素对齐方式不同时，可以结合 margin 实现。特别是 margin-top: auto 或 margin-bottom: auto，能在 flex 容器中将元素推到顶部或底部。
立即学习“前端免费学习笔记（深入）”；
例如：一个元素居中，另一个靠下
.container {
display: flex;
align-items: center; /* 整体居中 */
height: 300px;
}
<p>.item1 {
background: #ccc;
}</p><p>.item2 {
margin-top: auto; /<em> 将此元素推到底部 </em>/
background: #999;
}</p>此时 item2 会脱离 align-items 的影响，自动占据剩余空间下方位置。
3. 常见应用场景
这种组合适合以下情况：
- 卡片布局中，标题居中，按钮固定在底部
- 侧边栏菜单项居中，但“退出”按钮靠底显示
- 对话框内容垂直居中，但底部操作栏贴底
结构示例：
<div class="card">
<div class="content">正文内容</div>
<div class="btn" style="margin-top: auto;">确定</div>
</div>
<p>.card {
display: flex;
flex-direction: column;
height: 200px;
align-items: center;
justify-content: center;
}
.btn {
margin-top: auto;
}</p>4. 注意事项
使用时注意以下几点：
- margin:auto 在 flex 子元素中表现特殊，可代替 align-self 实现快速定位
- 如果子元素设置了固定高度，stretch 行为会被覆盖
- flex-direction 为 row 时，垂直对齐由 align-items 控制；为 column 时，则控制水平对齐
基本上就这些，align-items 负责统一对齐，margin 自动分配空间实现个别元素分离定位，两者配合很实用。
