Flex布局换行需同时满足三条件：显式设置flex-wrap: wrap、父容器有明确宽度、子项可收缩（如flex: 1 1 200px或min-width: 0），缺一不可。
Flex 布局不是“加个 display: flex 就能自动适配一切”的万能开关，它依赖容器与子项属性的精确配合。多数布局失效，问题不在写法错，而在没理清主轴/交叉轴关系、没处理好换行或空间分配逻辑。
flex-direction 和 justify-content/align-items 的对应关系容易搞反
这两个对齐属性不按“水平/垂直”命名，而是严格绑定主轴和交叉轴——主轴方向变了，它们的作用就翻转。
-
flex-direction: row（默认）：主轴水平 →justify-content控左右，align-items控上下 -
flex-direction: column：主轴垂直 →justify-content控上下，align-items控左右
常见错误：在 column 布局下仍写 justify-content: center 想“水平居中”，结果所有项目在顶部堆叠居中。真正要水平居中，得用 align-items: center。
flex-wrap 默认是 nowrap，内容超宽也不会自动折行
很多人以为卡片多就会自动换行，但 Flex 容器默认死扛一行，子项会被强行压缩甚至溢出视口。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
flex-wrap: wrap才启用换行 - 换行后
align-content才生效（控制多行之间的垂直分布） - 移动端小屏想强制单列？别只靠媒体查询改
width，配合flex: 0 0 100%更可靠
旧版 Android WebView 对 width: 50% + flex-wrap 渲染异常，优先用 flex: 0 0 50% 替代。
flex 属性缩写顺序固定，省略值隐含规则常被误读
flex 是 flex-grow flex-shrink flex-basis 的三值缩写，顺序不能错，省略时按规则补默认值。
-
flex: 1→flex: 1 1 0：从 0 开始均分剩余空间，忽略内容宽度 -
flex: 1 0→flex: 1 0 0：放大但禁止收缩，小屏易溢出 -
flex: auto→flex: 1 1 auto：先按内容占位，再分剩余空间，文字多的项会撑宽整行 - 等宽卡片布局必须用
flex: 1或显式flex-basis: 0；若子项已设width，需先清掉，否则flex: 1失效
单个项目特殊对齐必须用 align-self，align-items 不起作用
align-items 是容器级属性，作用于所有子项；想让第 3 个子项在交叉轴上顶对齐，其他居中？align-items 无能为力。
- 单个项目特殊对齐，必须在该项目上设
align-self: flex-start（或center/flex-end） -
align-self可覆盖容器的align-items设置 - 嵌套 Flex 容器时，内层
align-items作用于其直接子项，不影响外层结构
真正难的不是写出来，而是判断当前主轴方向、确认是否需要换行、看清 flex 缩写背后的真实三元组——这些细节一错，布局就偏移、卡顿或溢出，且很难一眼定位。
