flex-direction决定主轴方向并影响对齐属性作用轴，row为默认水平左→右，row-reverse、column、column-reverse分别反转或垂直排列；flex-wrap控制换行，nowrap强制单行，wrap/wrap-reverse允许折行且justify-content仅作用于当前行；align-content用于多行在交叉轴的对齐；order按数值升序调整渲染顺序但不改变DOM结构及无障碍访问；flex-flow是direction与wrap的简写，建议初学者显式声明以避免调试困难。
flex-direction 决定主轴方向，直接影响项目排列顺序
默认情况下 flex-direction: row，项目从左到右沿水平主轴排列。改用 row-reverse 会反转顺序（右→左），column 则让项目从上到下堆叠，column-reverse 反之。注意：这不仅改变视觉流向，还会影响 justify-content 和 align-items 的作用方向——前者始终对齐主轴，后者始终对齐交叉轴。
常见误操作是只调 justify-content 却没意识到主轴已变成垂直方向，结果“居中”没生效。建议先确认 flex-direction 值再设对齐方式。
flex-wrap 控制项目是否换行，避免溢出或强制压缩
单行布局用 flex-wrap: nowrap（默认），所有项目强行挤在一行，可能溢出容器或缩小到不可读；wrap 允许折行，新行按主轴方向继续排列；wrap-reverse 折行方向相反（比如 row 下新行出现在上方）。
实际开发中容易忽略的是：换行后 justify-content 仅作用于**当前行**，不是整个容器。若需多行整体居中，得配合 align-content（控制行与行之间的间距）。
立即学习“前端免费学习笔记（深入）”；
-
align-content: center使多行在交叉轴居中（如flex-direction: row; flex-wrap: wrap时，各行上下居中） -
align-content: flex-start让所有行贴顶部（默认行为） - 单行时
align-content无效
order 属性可局部调整项目顺序，不依赖 HTML 结构
order 是项目级属性，默认值为 0。数值越小，项目越靠前。它不改变 DOM 顺序，只影响渲染位置，对屏幕阅读器和键盘导航无影响——这是无障碍隐患点。
使用场景有限但明确：
- 响应式中切换卡片顺序（如移动端把侧边栏提到主内容前）
- 临时突出某个模块（设
order: -1） - 慎用于复杂排序逻辑，易与 JavaScript 动态操作冲突
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 0; }
此时渲染顺序是 item-c → item-b → item-a，但 DOM 中仍是 a-b-c。
flex-flow 是 flex-direction 和 flex-wrap 的简写，但别滥用
flex-flow 合并两个声明，例如 flex-flow: column wrap 等价于分别写 flex-direction: column 和 flex-wrap: wrap。语法简洁，但可读性下降——尤其当团队成员不熟悉简写时，容易漏看 wrap 导致换行失效。
建议：
- 初学者或协作项目中，显式写出两个属性更稳妥
- 组件库或工具类中可用简写提升密度
- 永远不要只写
flex-flow: wrap（缺少方向值，浏览器会重置为row）
方向和换行逻辑耦合紧密，但调试时往往要分开验证——比如先固定 flex-direction，再单独开/关 flex-wrap 看效果变化。
