flex-direction决定主轴方向且独立于书写方向，常见值为row、row-reverse、column、column-reverse；flex-wrap控制换行，默认nowrap，wrap才启换行，二者共同影响交叉轴及align-items/align-content行为。
flex-direction 决定主轴方向，别和书写方向混淆
flex-direction 控制子元素排列的主轴走向，它不看文字从左到右还是从右到左，只按你明确写的值生效。常见取值有 row（默认，左→右）、row-reverse（右→左）、column（上→下）、column-reverse（下→上）。
容易踩的坑是以为设了 direction: rtl 就能翻转 flex-direction: row 的行为——不会。RTL 只影响文本和某些内联对齐，flex-direction 是独立控制流的。
- 响应式中慎用
row-reverse或column-reverse，屏幕阅读器仍按 DOM 顺序读，视觉顺序和语义顺序可能错位 -
column下，width不再约束子项（主轴变垂直），改用height或flex-basis控制尺寸 - 嵌套 Flex 容器时，内层的
flex-direction不受外层影响，各自独立
flex-wrap 控制换行行为，单行布局默认不换行
flex-wrap 默认是 nowrap，意味着所有子项会被强行压在一行里，哪怕溢出容器也不折行。只有显式设为 wrap 或 wrap-reverse 才会换行。
注意：flex-wrap: wrap 不等于“自动适配宽度”，它只在主轴空间不足时触发换行；如果子项用了 flex-shrink: 0 或固定宽高，可能依然溢出。
-
wrap-reverse会让新行出现在旧行上方（row主轴下）或左侧（column主轴下），但交叉轴对齐（align-content）方向也跟着翻转 - 换行后，每行成为一个“flex line”，
justify-content仅作用于当前行内，不是整个容器 - IE10–11 对
flex-wrap支持不全，wrap-reverse完全不支持，需用display: -ms-flexbox+ JS 检测降级
flex-direction 和 flex-wrap 联合影响交叉轴概念
交叉轴（cross axis）永远垂直于主轴，而主轴由 flex-direction 决定；flex-wrap 是否启用，则决定是否存在多条交叉轴（即多行）。这意味着 align-items 和 align-content 的行为会联动变化。
例如：flex-direction: row; flex-wrap: nowrap → 只有一行 → align-content 无效（没多行可对齐），align-items 控制所有子项在纵轴上的位置；换成 wrap 后，align-content 才开始控制各行在纵轴上的分布。
-
align-items: stretch在单行下会让子项填满交叉轴，但在多行且子项有固定高度时，它只拉伸本行内未设高度的子项 -
flex-direction: column; flex-wrap: wrap时，主轴是纵向，换行其实是“列满换新列”，此时justify-content控制的是每列内子项在垂直方向的分布 - 调试时可用浏览器 DevTools 的 Flex overlay 查看主轴/交叉轴方向和行数，比猜更可靠
实际布局中优先用 flex-wrap 而非强行缩放子项
遇到内容溢出时，第一反应不该是调 flex-shrink 或 min-width，而是确认是否该用 flex-wrap: wrap。Flex 的设计哲学是“让内容自然流动”，硬压缩常导致文字截断、图标变形或可访问性下降。
.card-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 先放开换行 */
gap: 1rem;
}
.card-grid > * {
flex: 1 1 200px; /* 最小宽度 200px，允许放大缩小 */
}
上面这段比写一堆媒体查询 + flex-basis 切换更健壮。真正要注意的是：当子项数量极少（比如只有 1–2 个）且容器很宽时，flex-wrap 不会强制填满整行，得靠 justify-content: space-between 或 gap 配合调整间距。
交叉轴对齐方式、换行后的行间间距、以及子项自身尺寸策略，三者必须一起看——漏掉任一环，都可能让布局在不同数据下突然错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
