flex-direction 决定主轴方向，外层 column 时 justify-content 控制上下、align-items 控制左右；嵌套中每层需重判主轴，margin:auto 和 flex:1 依赖上层高度承诺，order 不跨层，align-items 不继承，仅作用于直接子项。
flex-direction 会改变对齐属性的作用轴，嵌套时极易误判主轴
很多人给内层容器加了 align-items: center 却没生效，不是写错了，而是没意识到：外层 flex-direction: column 会让内层的主轴变成垂直方向，此时 justify-content 才控制上下对齐，align-items 反而管左右——和直觉相反。
- 外层
flex-direction: row→ 主轴水平 →justify-content控制左右，align-items控制上下 - 外层
flex-direction: column→ 主轴垂直 →justify-content控制上下，align-items控制左右 - 嵌套越深，主轴方向可能翻转多次；每次进新容器，都要重问一句：“当前主轴是哪个方向？”
嵌套层级超过三层后，margin 和 flex 分配开始互相干扰
比如在三级嵌套中给某子项设 margin-top: auto，本意是把它推到容器底部，结果发现它卡在中间不动——因为上层容器没设 min-height 或没启用 flex-direction: column，导致“可用空间”为 0，auto 失效。
- 外层容器若未设
min-height或高度依赖内容，内层margin: auto、flex: 1都会失去参照基准 -
padding和margin在嵌套 flex 容器中容易被“压缩”或“透传”，尤其当父容器用了flex-wrap: wrap时，换行后对齐逻辑突变 - 推荐用
gap替代margin控制项目间距（现代浏览器支持良好），避免父子 margin 合并或错位
order 属性在嵌套结构中完全失效，别指望它跨层调序
order 只作用于**直接子元素**。如果把 #item-1 套在 .column 里，再把 .column 放进外层 .wrapper，那么无论怎么设 #item-1 的 order，它永远无法跑到 #item-3 前面去——它连外层容器的“项目”都不是。
-
order不穿透嵌套，只影响同一级 flex 容器下的直系子项 - 想实现跨区块重排（比如响应式下把侧边栏内容插到正文中间），Flexbox 无解，必须换 CSS Grid 或改 DOM 结构
- 调试时可临时加
outline: 1px solid red到各容器，快速确认哪些元素才是当前 flex 容器的 direct children
align-items 不继承，但视觉上容易误以为“继承了”
给外层容器设 align-items: flex-start，里面某个卡片里的标题却居中了——这不是 bug，是因为卡片自己也声明了 display: flex 并设了 align-items: center。父级的 align-items 对孙子元素零影响。
立即学习“前端免费学习笔记（深入）”；
- 每一层 flex 容器的
align-items和justify-content都只作用于其直接子项 - 常见错误：在外层统一设
align-items: center，以为所有内容都会居中，结果内层卡片因自身 flex 设置而“突围”成功 - 检查方式：打开浏览器开发者工具，逐层看 computed 样式中的
align-items值，确认是否真被应用到了目标元素上
