弹性布局适配关键在于主轴/交叉轴方向、换行行为、伸缩基准三者协同：flex-direction决定主轴，justify-content仅作用于主轴，align-items控制交叉轴；flex-wrap开启后align-content才生效；flex-grow分配前先扣除flex-basis总和；父容器无明确高度时align-items: center在垂直方向失效。
弹性布局不是“加个display: flex就自动适配”，真正决定网页能否在不同设备上稳定呈现的，是主轴/交叉轴方向、换行行为、伸缩基准这三者的协同逻辑。
flex-direction 和 justify-content 方向必须匹配
很多人设了justify-content: center却没居中，是因为没意识到：这个属性只在主轴上生效。主轴由flex-direction决定——默认row时主轴是水平的，center就是水平居中；一旦改成column，主轴变成垂直方向，justify-content: center就变成了垂直居中。
- 想让子项水平居中 + 垂直居中？容器要同时写：
justify-content: center（主轴居中） +align-items: center（交叉轴居中） - 设了
flex-direction: column还用justify-content: space-between，结果是上下两端留空，不是左右 -
align-items默认值是stretch，如果子项有固定高度或min-height，拉伸会被截断，此时align-items: flex-start反而更可控
flex-wrap 决定换行，而 align-content 只在换行后起作用
flex-wrap: nowrap（默认）下，即使内容溢出，项目也不会折行，而是被压缩（尤其当flex-shrink: 1时）。只有开启wrap或wrap-reverse，align-content才开始控制“多行之间”的间距。
- 单行布局里写
align-content: space-between完全无效 - 换行后发现各行紧贴在一起？缺的是
align-content: space-between或space-around，不是justify-content - 父容器没设
height，又用了flex-direction: column，align-content可能因交叉轴长度未定义而失效
flex-grow 分配空间前先扣掉 flex-basis
flex-grow不是直接按比例切剩余宽度，它算的是：容器主轴剩余空间 − 所有项目的flex-basis总和。这个差值再按flex-grow权重分配。
- 所有子项都用
flex: 1，但宽度不等？很可能因为文字多的项flex-basis: auto导致初始宽度已偏大 - 想严格等宽填满一行，应统一设
flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0），避免内容尺寸干扰 -
flex: 2和flex: 1在flex-basis: auto下未必是2:1，但在flex-basis: 0下一定成立
父容器高度未设时，align-items: center 在垂直方向常失效
当flex-direction: row（主轴水平）时，交叉轴是垂直方向，align-items: center依赖父容器有明确高度。如果父容器仅靠内容撑开，交叉轴长度为“不确定”，居中就无从谈起。
- 常见表现：子项在视觉上没垂直居中，检查父容器是否漏写了
height或min-height - 用
vh单位（如min-height: 100vh）比height: 100%更可靠，后者需确保所有祖先元素都有高度 - 子项内部用
margin: auto在 Flex 容器中无效——Flex 的对齐机制会覆盖它
最常被跳过的一步，是确认flex-basis的取值来源。它不是凭空出现的“默认值”，而是取决于你有没有显式设置、设的是auto还是具体数值，这个选择直接决定flex-grow的行为是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
