flex-direction 控制主轴方向，默认 row（左→右），column 为上→下，加 reverse 可翻转；order 属性按数值升序调整单个子元素视觉顺序，默认值 0；justify-content 控制主轴对齐，align-items 控制交叉轴对齐；flex-wrap 换行后 align-content 管理行间分布。
flex-direction 控制主轴方向，决定元素排列走向
默认情况下 flex-direction 是 row，元素从左到右依次排列。改成 column 就变成从上到下；加 reverse 后缀（如 row-reverse）可翻转顺序。注意：这影响的是所有子元素的自然流顺序，不是单个元素的位置。
-
row：主轴水平向右，justify-content控制左右对齐 -
column：主轴垂直向下，justify-content控制上下对齐 - 浏览器兼容性没问题，IE10+ 支持（需
-ms-前缀）
别只改 flex-direction 就以为能“重排”，它不改变 dom 顺序，只改变渲染流向——这对屏幕阅读器和键盘导航仍有影响。
order 属性真正改变单个元素的视觉排序
order 是 flex 项目（子元素）的属性，数值越小越靠前。默认值是 0，可以设为负数、正数甚至小数（如 -1、2、0.5）。
- 元素按
order值升序排列，相同值则按 HTML 中的原始顺序 - 它只影响视觉顺序，不影响语义顺序、tabindex 或可访问性流
- 不要依赖
order实现核心内容逻辑，比如把“提交按钮”用order: -1提到最前，但 DOM 里它还在表单末尾——这会让键盘用户困惑
.item-a { order: 2; } .item-b { order: -1; } .item-c { order: 0; }渲染顺序变成：b → c → a
立即学习“前端免费学习笔记（深入）”；
justify-content 和 align-items 配合主轴/交叉轴定位
justify-content 管主轴（由 flex-direction 决定），align-items 管交叉轴。它们不改变元素顺序，但决定“怎么摆”。
-
justify-content: flex-end把所有元素推到主轴末端（比如右端或底部） -
align-items: center让所有元素在交叉轴上居中（比如多行文字垂直居中） - 如果用了
flex-wrap: wrap，justify-content只作用于当前行，不是整个容器
常见误用：想让某个按钮右对齐，却给它加 margin-left: auto ——其实更简洁的方式是给父容器设 justify-content: space-between，或直接给该按钮加 margin-left: auto（这是合法且高效的 hack）。
flex-wrap 和 align-content 处理多行时的行级布局
当子元素宽度总和超过容器，且设置了 flex-wrap: wrap，就会换行。此时：
-
align-content控制行与行之间的分布（类似justify-content对单行的作用） -
align-items仍控制每行内各元素在交叉轴上的对齐 -
align-content在单行时无效，别指望它起作用
容易忽略的一点：align-content 的生效前提是容器在交叉轴上有剩余空间。如果父容器高度固定且子元素撑满，它就完全没效果。调试时先检查容器是否真有“多余高度”。