flex-direction改变后justify-content和align-items行为翻转是设计逻辑而非bug：主轴方向变化导致justify-content控制主轴（如column下为垂直对齐），align-items控制交叉轴（如column下为水平对齐）；需先判断flex-direction再选用对应属性。
flex-direction 改变后 justify-content 和 align-items 行为翻转
主轴方向变了，两个对齐属性的作用就跟着调换——这不是 bug，是设计逻辑。很多人在 flex-direction: column 下还写 justify-content: center 想“水平居中”，结果所有项目全堆在容器顶部中间，因为此时主轴是垂直的，justify-content 控的是上下对齐。
正确做法：
- 想让项目水平居中（即交叉轴居中）→ 用
align-items: center - 想让项目垂直居中（即主轴居中）→ 用
justify-content: center - 检查当前
flex-direction值，再决定该动哪个属性
flex-wrap: wrap 不是默认行为，必须显式声明
默认 flex-wrap: nowrap，子项死扛一行，哪怕被压成几像素宽或直接溢出视口。你看到卡片挤成一条线、文字换行失效、移动端布局崩掉，大概率就是漏了这句。
常见场景和写法：
- 两行卡片列表 → 容器加
flex-wrap: wrap，子项设flex: 0 0 48%（留间隙） - 移动端单列 →
flex-wrap: wrap+ 子项flex: 0 0 100%，比只靠媒体查询改 width 更稳 - 旧版 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：先按内容占位，再分剩余空间，适合文字长度差异大的场景 - 等宽卡片要生效，子项不能带
width，否则flex: 1会被压制；要么清掉 width，要么用flex-basis: 0
单个项目交叉轴对齐必须用 align-self，不是 align-items
align-items 是容器级属性，作用于所有子项；想单独让第 3 个 div 顶对齐、其余居中？align-items 无能为力。
实操要点：
- 在目标子项上直接写
align-self: flex-start（或center/flex-end） -
align-self会覆盖容器的align-items值，但不影响其他项目 - 注意：只有当容器设置了
display: flex且存在交叉轴（比如flex-direction: row时交叉轴是垂直方向），align-self才有效
实际写 Flex 布局时，最常卡住的地方不是语法记不住，而是没意识到 flex-direction 一换，整个对齐逻辑就重置了；或者忘了 flex-wrap 默认关着，以为“内容超了自然折行”。这些点不手动验证一次，光看文档很难真正踩准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
