弹性布局的核心难点在于主轴/交叉轴方向错配、换行后对齐失效及flex-grow/flex-shrink在不同flex-basis下的反直觉行为；需协同理解flex-direction与flex-wrap，明确justify-content和align-items的作用方向与生效条件。
直接上结论：弹性布局不是“加个 display: flex 就完事”，真正卡住人的，是主轴/交叉轴方向错配、换行后对齐失效、以及 flex-grow/flex-shrink 在不同 flex-basis 下的行为反直觉。
flex-direction 和 flex-wrap 必须一起看
- 主轴方向决定
justify-content有效范围，交叉轴方向决定align-items的作用方向 - 比如设了
flex-direction: column，那justify-content: center是垂直居中，align-items: center才是水平居中——很多人在这里写反 -
flex-wrap: nowrap（默认）下，即使内容溢出容器，项目也不会换行，而是被强制压缩（尤其当有flex-shrink: 1时） -
flex-wrap: wrap后，align-content才生效；若只有一行，align-content完全没效果
常见错误现象：
- 设置了
justify-content: space-between却发现两端没空隙 → 检查是否误用了flex-direction: column，而没意识到此时“两端”是上下边缘 - 换行后各行堆在一起、没间距 → 忘了加
align-content: space-between或space-around
flex-grow 不等于“按比例分剩余空间”
-
flex-grow的计算基准是：容器主轴剩余空间 － 所有项目的flex-basis总和 - 如果所有项目都设
flex-basis: auto（默认），那它参考的是内容宽度/高度；如果设了具体值（如flex-basis: 100px），就以此为起点再分配 - 当
flex-basis: 0时，flex-grow才真正变成“纯比例分配”，否则内容尺寸会吃掉一部分空间
典型陷阱：
- 三个子项分别设
flex: 1、flex: 2、flex: 1，但实际宽度不按 1:2:1 → 很可能因为其中某项文字多、flex-basis: auto导致初始宽度已超预期 - 想让卡片等宽填满一行，却用
flex: 1→ 应该统一设flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0）
align-items 和 align-self 的优先级与副作用
-
align-items是容器级属性，设在父元素上，影响所有子项在交叉轴上的对齐 -
align-self可单独覆盖某个子项，优先级更高 - 但注意：
align-items: stretch（默认）会让子项拉伸填满交叉轴，如果子项设置了固定高度/宽度，或min-height/max-height，拉伸就会被截断或忽略
容易被忽略的点：
- 父容器
height未设置（比如仅靠内容撑开），align-items: center在垂直方向可能无效 → 交叉轴没有确定长度，无法居中 - 子项内有
margin: auto，在 Flex 容器中会失效（Flex 有自己的对齐机制，margin: auto在主轴/交叉轴上可能被忽略或行为异常） -
align-items: baseline看似简单，但不同字体、line-height、内边距都会影响基线位置，调试困难
真正难的从来不是语法，而是你改了一个属性，结果三处地方同时变形——尤其是嵌套 Flex 容器时，主轴/交叉轴层层翻转，justify-content 和 align-items 的语义会反复切换。动手前先用浏览器 DevTools 的 Layout 面板确认当前主轴方向，比硬猜快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
