Flexbox 的核心在于容器与项目属性的配对理解：flex-direction 决定主轴方向，进而影响 justify-content（主轴对齐）和 align-items（交叉轴对齐）的行为；flex-wrap 默认 nowrap，需显式设 wrap 才换行，此时 align-content 才生效；flex 是 shorthand，顺序为 flex-grow | flex-shrink | flex-basis，常见误写如 flex: 1 0 实为 flex: 1 0 0；布局需兼顾 display: flex、主轴判断与属性协同，否则易翻车。
Flexbox 不是“用不用”的问题，而是“怎么设才不翻车”的问题——容器属性和项目属性必须配对理解，单独调一个往往没效果，甚至起反作用。
flex-direction 控制主轴方向，但会影响 justify-content 和 align-items 的行为
flex-direction 决定主轴朝哪走，它一变，justify-content（主轴对齐）和 align-items（交叉轴对齐）的“上下左右”含义就跟着变。比如：flex-direction: column 时，justify-content: flex-start 是顶对齐，不是左对齐。
-
row（默认）：主轴水平向右，justify-content控制左右，align-items控制上下 -
column：主轴垂直向下，justify-content控制上下，align-items控制左右 - 别硬记“左/上”，盯住主轴方向，再看“justify = 主轴，align = 交叉轴”这个口诀
flex-wrap 默认不换行，内容溢出也不自动折行
很多人以为子项超出容器就会像文本一样自动换行，其实 flex-wrap 默认值是 nowrap，所有项目死扛在一行，宽度被压缩甚至溢出可视区。
- 要换行，必须显式设
flex-wrap: wrap或wrap-reverse - 换行后，
align-content才生效（控制多行之间的间距），单行时它完全无效 - 移动端常见坑：盒子设了
width: 100%+flex: 0 0 auto，但忘了flex-wrap，结果内容横向滚动
flex 属性是 shorthand，三个值顺序不能错：flex-grow | flex-shrink | flex-basis
flex 看似简单，但三个参数位置固定、语义强耦合。写成 flex: 1 是 flex: 1 1 0，而 flex: 1 0 会解析为 flex: 1 0 0（即不收缩、基准为 0），不是“放大但不设收缩比”。
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 auto：不放大、不缩小、按内容宽高（最安全的初始值） -
flex: 1：等价于flex: 1 1 0，常用于填满剩余空间 -
flex: 2和flex: 1同行时，前者占剩余空间的 2/3，后者占 1/3 - 单独设
flex-grow而忽略flex-shrink可能导致缩放异常（尤其在小屏下）
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.item {
flex: 0 0 calc(50% - 8px); / 两列布局，预留 gap 空间 /
}
@media (max-width: 600px) {
.item {
flex: 0 0 100%; / 小屏单列 /
}
}
Flexbox 的复杂点不在属性多，而在“容器定义主轴，项目响应主轴”这个双向依赖关系。漏掉 display: flex、误判主轴方向、或把 align-items 当成“垂直居中万能解”，是最常卡住的地方。
