flex布局核心是主轴与交叉轴：flex-direction定义主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐；轴线错则所有对齐失效。
Flex 布局不是“搭”出来的，而是通过明确主轴（main axis）和交叉轴（cross axis）的定义，再用对应属性控制容器与项目行为——轴线方向错了，所有对齐、伸缩、换行都会失效。
flex-direction 决定主轴朝哪边，不是“默认就是横着”
很多人以为 display: flex 一写，项目就自动横排，其实只是因为 flex-direction: row 是默认值。一旦你改了它，主轴立刻翻转，justify-content 和 align-items 的作用方向也会跟着变。
-
row：主轴水平向右，justify-content控制左右，align-items控制上下 -
column：主轴垂直向下，justify-content控制上下，align-items控制左右 -
row-reverse或column-reverse不仅翻转方向，还会改变flex-start/flex-end的语义位置，影响order和margin行为
常见错误：在 column 布局下还用 justify-content: center 想“水平居中”，结果内容全堆在顶部——因为此时 justify-content 是管“上下”的。
justify-content 和 align-items 必须按轴配对使用
这两个属性从不独立生效，它们严格绑定主轴/交叉轴。记错哪个是哪个轴，布局就完全失控。
-
justify-content：永远只管主轴（即flex-direction定义的方向）上的对齐 -
align-items：永远只管交叉轴（垂直于主轴）上的对齐 - 当项目高度不固定且
align-items: stretch（默认），又没设height或min-height，项目会撑满容器高度——但若父容器没高度（比如height: auto），它就什么也不撑
典型踩坑：align-items: center 在 flex-direction: column 下会让所有项目水平居中；但如果你忘了给父容器设 height，视觉上可能根本看不出“居中”效果，因为容器本身高度塌陷。
flex-wrap 影响 align-content 是否起作用
align-content 这个属性常被误用——它只在多行 flex 容器中生效，前提是 flex-wrap: wrap 或 wrap-reverse，且项目确实换行了。
-
flex-wrap: nowrap（默认）：无论你怎么设align-content，它都无效 - 即使写了
wrap，但如果所有项目都能塞进一行，align-content依然不触发 -
align-content控制的是“行与行之间”的分布，不是“项目与项目之间”——那是justify-content和gap的事
替代方案：单行场景下想控制项目间距，优先用 gap；多行且需控制行间距时，才打开 flex-wrap 并配 align-content。
容器设了 display: flex 后，子元素的 float/clear/vertical-align 失效
这不是警告，是硬性规则。只要你用了 display: flex 或 inline-flex，子元素的这些传统定位属性就彻底被忽略，浏览器不会报错，也不会 fallback，而是直接无视。
- 想让某个子元素“脱离 flex 流”？不能靠
float: left，得用position: absolute+ 手动定位，但注意它仍占 flex 项目流（除非加margin: auto或align-self调整） -
vertical-align对 flex 项目完全无意义——垂直对齐统一由align-items或align-self管理 - 如果旧代码里混用了
float和flex，页面很可能出现不可预期的空白或重叠，必须清理干净
最易被忽略的一点：flex 容器的尺寸计算逻辑变了——它不再依赖子元素的浮动撑开高度，而是根据 flex 项目的内容、flex-basis、flex-grow 等综合决定；所以别指望父容器自动适应浮动子元素的高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
