Flex布局面试卡点在于属性权力错配、flex缩写隐式行为（如flex:1=1 1 0%）、多行时align-items与align-content混淆；align-items需父容器有明确交叉轴尺寸才生效，flex-wrap启用后对齐逻辑切换至align-content控制行间距。
Flex 布局不是“会用就行”，面试中真正卡人的点集中在容器与项目属性的权力错配、flex缩写的隐式行为、以及多行场景下align-items和align-content的混淆。
为什么align-items: center有时没效果？
常见现象：给容器加了display: flex和align-items: center，但子元素就是不垂直居中。
- 检查父容器是否有明确高度 ——
align-items依赖交叉轴尺寸，若父容器高度为auto且无内容撑开，交叉轴长度为 0，居中自然失效 - 确认子元素没设
float、position: absolute或clear—— 这些属性在 Flex 容器中会被忽略，但可能让开发者误以为“样式没生效” - 注意
min-height写法：用min-height: 100vh比height: 100vh更安全，避免内容少时容器塌陷
flex: 1到底做了什么？
它等价于flex: 1 1 0%，不是“占满剩余空间”这么简单，而是三步动作：
-
flex-grow: 1：允许放大，按比例瓜分容器主轴剩余空间 -
flex-shrink: 1：允许收缩，当空间不足时按比例压缩 -
flex-basis: 0%：基准尺寸为 0，意味着所有项目从“零宽度/高度”开始分配空间 —— 这才是等分的关键
对比flex: 0 0 auto（固定尺寸不伸缩）或flex: 1 1 auto（以内容尺寸为基准再分配），flex: 1的“0%”才是实现等分布局的底层逻辑。
立即学习“前端免费学习笔记（深入）”；
换行后align-items突然失效？
这是高频误解：一旦启用flex-wrap: wrap，单行布局变成多行，align-items只控制**每行内项目在交叉轴上的对齐**，而行与行之间的间距由align-content控制。
- 如果看到多行项目顶部堆叠、中间留白，大概率是忘了设
align-content: stretch（默认值）或center -
align-content在只有一行时完全不生效，调试时务必先确认是否真有多行（比如用flex-basis压窄项目触发换行） - 移动端小屏下
wrap易被忽略，建议在响应式断点里显式重置align-content，而非依赖默认值
圣杯布局里order为什么有时要设负值？
当 HTML 结构是header → main → footer → sidebar，但视觉顺序要求sidebar在main左侧时，order必须打破文档流顺序：
-
main保持order: 0（默认） -
sidebar设order: -1，才能排到main前面；设order: 1只会让它跑到footer后面 - 不要依赖
order做复杂排序 —— 超过 3 个元素时，可读性骤降，且order不触发重排，动画支持差
真正容易被忽略的是：Flex 容器中order影响的是**视觉顺序**，但 DOM 顺序不变，这对语义化、屏幕阅读器和 SEO 仍有实际影响 —— 不是“看起来对了就完事”。
