多层盒子对齐错位的关键是让最近共同父容器设为flex容器，并正确配置justify-content、align-items等轴向属性，同时排除margin、inline默认行为等干扰。
多层盒子对齐错位，核心问题往往不是子元素写错了，而是父容器没有主动“接管”布局控制权。用 display: flex 确实能高效解决，但关键不在加了 flex，而在于让**正确的父级**变成 flex 容器，并合理设置其主轴、交叉轴和子项行为。
找准该设为 flex 的那一层父盒子
错位常发生在嵌套较深时（比如 .card > .content > .header > .title），很多人直接给最内层或最外层加 flex，结果无效。要从错位的两个元素出发，往上找它们**最近的共同父容器**——这个容器才是该设为 display: flex 的对象。
- 例如：两个按钮左右不对齐，它们同属一个 .btn-group，那就给 .btn-group 设置 display: flex
- 如果标题和图标上下偏移，又同在 .header 内，就给 .header 设 flex，而不是给整个页面容器或 .header 里面的 span
- 避免过度上提：不要一出问题就给 body 或 wrapper 加 flex，容易引发全局布局混乱
用 align-items 和 justify-content 控制对齐方向
只写 display: flex 不够，必须配合轴向对齐属性：
- justify-content 控制主轴（默认水平）对齐：flex-start（左）、center（居中）、space-between（两端）等
- align-items 控制交叉轴（默认垂直）对齐：stretch（拉满，默认）、center（垂直居中）、flex-start（顶对齐）
- 若需单独调整某个子项，可用 align-self 覆盖父级 align-items，比如让其中一个按钮底部对齐
注意子项的 margin 和尺寸干扰
flex 容器虽强，但子元素自身的 margin、固定宽高、float 或 vertical-align 仍可能破坏对齐：
立即学习“前端免费学习笔记（深入）”；
- 检查是否有 margin: auto 或意外的 margin-top/bottom，它会抢占 flex 分配空间
- 图片、按钮、输入框等默认是 inline 元素，可能带 baseline 对齐，加 vertical-align: top 或统一设为 flex 项更稳妥
- 避免同时用 width/height 和 flex-grow：前者会限制伸缩，后者想撑满，容易冲突
必要时启用 flex-wrap 和 flex-direction
当内容超出一行或需要竖排时，基础 flex 默认不换行、不转向：
- 加 flex-wrap: wrap 允许子项折行，适合响应式多列卡片
- 用 flex-direction: column 切换主轴为垂直方向，适合表单标签+输入框垂直堆叠
- column 下，justify-content 变成控制“垂直方向”的对齐，align-items 则管“水平方向”
基本上就这些。display: flex 不是万能胶，而是把布局权交还给父容器的开关——开对地方、设对方向、清掉干扰，对齐自然就稳了。
