Flex布局核心是空间分配逻辑：flex:1展开为1 1 0会忽略原始宽度；align-items作用于单行项目交叉轴对齐，align-content仅在多行换行时生效；justify-content:space-between需至少两个项目才起效。
因为 Flex 布局暴露的是开发者对「空间分配逻辑」的真实理解，不是背属性就能蒙混过关的。
面试官真正想看的不是你会不会写 display: flex
而是你能不能在没有 JS 干预的前提下，仅靠 CSS 控制元素如何争抢、让出、撑满、对齐空间。比如：
- 当容器宽度突然变窄，
flex-shrink为 0 的项目会溢出，但很多人默认它“不缩”，其实前提是它的内容没换行、没溢出隐藏； -
align-items: stretch看似简单，但它只对「未设置高度」或height: auto的项目生效——一旦写了height: 100px，拉伸就失效了； -
justify-content: space-between要求至少两个项目才有效，单个项目时它等同于flex-start，这点常被忽略。
flex: 1 是最危险的简写，也是最容易翻车的点
它展开后是 flex: 1 1 0，意味着「可放大、可缩小、基准尺寸为 0」。这和直觉相反——你以为它只是“均分剩余空间”，但它会把项目原有宽度（比如 width: 200px）直接无视掉。
- 想保留原始宽度再均分？得写
flex: 1 1 auto； - 想禁止缩小又允许放大？得写
flex: 1 0 auto； - 用
flex: 1做输入框 + 按钮组合时，按钮可能被压缩到看不见，因为它的min-width没被尊重。
交叉轴对齐为什么总出错？
因为 align-items 和 align-content 完全不是一回事，但名字太像，且浏览器 DevTools 默认不标主/交叉轴方向。
立即学习“前端免费学习笔记（深入）”；
-
align-items控制「单行内所有项目」在交叉轴上的对齐（比如一列里每个 item 垂直居中）； -
align-content只在多行（flex-wrap: wrap）时生效，控制「所有行整体」在交叉轴上的分布； - 单行容器设
align-content完全无效，但很多人调了半天发现没反应，还以为是浏览器 bug。
真正难的从来不是记住属性名，而是在具体场景里判断：哪个轴是主轴？当前是单行还是多行？哪些尺寸是固有的、哪些是弹性的？这些判断错了，代码就永远差那么一点。
