flex布局需先设display: flex，再通过flex-direction（默认row）确定主轴方向，justify-content控制主轴对齐、align-items控制交叉轴对齐，二者作用方向随主轴动态切换；flex-wrap控制换行，默认nowrap。
直接给父容器加 display: flex，子元素自动按主轴排列；不改 HTML 结构就能控制方向、顺序、对齐和换行。
flex-direction 控制 row 还是 column
默认是 flex-direction: row（从左到右），设成 column 就变成从上到下。别只写 display: flex 就完事——漏掉方向声明，移动端窄屏下容易意外换行或堆叠，看着像“没生效”。
-
row-reverse和column-reverse可翻转视觉顺序，但 DOM 顺序不变 - IE10–11 需补
-ms-flex-direction前缀（如仍需兼容） - 主轴方向决定了
justify-content的作用轴：row 时它管水平，column 时它管垂直
flex-wrap 决定是否换行
flex-wrap: nowrap 是默认值，子元素总宽超父容器时不会折行，而是压缩（flex-shrink: 1），常被误认为“布局失败”。
- 要让多列内容自动折行，必须显式加
flex-wrap: wrap -
wrap-reverse会让新行出现在主轴起点反向位置（比如row下新行在上方） -
flex-wrap只在父容器有明确宽度（如width: 300px或max-width）时才起效
order 属性实现视觉顺序反转（HTML 结构不动）
想让后写的 HTML 元素显示在前面？不用改结构，用 order。它只影响 Flex 子项的视觉顺序，不影响 DOM 顺序、可访问性或 JS 获取顺序。
- 默认
order: 0，数值越小越靠前；order: -1比0更优先 - 多个元素排序时，相同
order值按 HTML 源顺序排 - 注意：
order不改变justify-content的对齐基准点，只是挪位置 - Grid 布局里不能用
order，得用grid-row/grid-column
justify-content 和 align-items 别搞混主轴/交叉轴
这是最常踩的坑：在 flex-direction: column 时还用 justify-content: center 想水平居中，结果没反应——因为此时主轴是垂直的，justify-content 控的是上下对齐。
-
justify-content总是控制主轴方向（跟flex-direction一致） -
align-items总是控制交叉轴方向（跟flex-direction垂直） - 单个子元素完全居中：同时设
justify-content: center+align-items: center - 不想子元素拉满交叉轴高度（比如 column 下被撑高），把
align-items: stretch改成flex-start或center
真正难的不是写对某一行 CSS，而是理解主轴/交叉轴如何随 flex-direction 动态切换——所有对齐和换行行为都依赖这个前提。一旦方向变了，justify-content 和 align-items 的作用对象就跟着变，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
