flex布局需按“定主轴→控换行→调对齐与伸缩”三步落地：flex-direction决定justify-content（主轴）和align-items（交叉轴）方向；flex-wrap默认nowrap易致溢出；flex shorthand顺序不可颠倒；align-self用于单项目交叉轴对齐。
Flex 布局不是加个 display: flex 就能自动“适配一切”的，真正快速落地的关键在于：先定主轴方向、再控换行、最后调对齐与伸缩，漏掉任一环都可能白写。
flex-direction 决定 justify-content 和 align-items 的实际效果
这两个对齐属性不表示“水平”或“垂直”，而是分别作用于主轴和交叉轴——主轴变了，它们的行为就翻转。比如：
-
flex-direction: row（默认）→justify-content控左右，align-items控上下 -
flex-direction: column→justify-content控上下，align-items控左右
常见错误是写 flex-direction: column 后还用 justify-content: center 想“水平居中”，结果所有项目在顶部堆叠。正确做法是改用 align-items: center。
flex-wrap 默认不换行，超宽内容会溢出或压缩
flex-wrap 默认值是 nowrap，子项死扛在一行，哪怕被压成 1px 宽或跑出视口。需要换行必须显式设为 wrap 或 wrap-reverse。
- 两行卡片布局？必须写
flex-wrap: wrap - 移动端小屏想单列？配合
flex: 0 0 100%比只靠媒体查询改width更稳 - 旧版 Android WebView 对
width: 50%+flex-wrap渲染异常，优先用flex: 0 0 50%
flex 是 shorthand，顺序固定且隐式值易错
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：先按内容占位，再分剩余空间，文字多的项会撑宽整行 - 安全起点：想保持原始尺寸又不放大缩小，用
flex: 0 0 auto
等宽卡片布局必须用 flex: 1 或显式 flex-basis: 0，否则带 width 的子项会让 flex: 1 失效——得先清掉 width。
align-self 才能单独控制某个子项的交叉轴对齐
align-items 是容器级属性，作用于所有项目；想让第 3 个子项在交叉轴上顶对齐，其他居中？align-items 无能为力。
- 单个项目特殊对齐，必须在该项目上设
align-self: flex-start（或其他值） -
align-self可取值同align-items，但仅影响当前项目 - 注意：
align-self: auto会继承父容器的align-items值
真正容易被忽略的是：主轴方向判断错了，后续所有对齐逻辑都会反着来；而 flex-wrap: nowrap 这个默认值，比任何 CSS bug 都更安静地毁掉整个响应式布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
