Flexbox容器需显式声明display:flex或inline-flex，否则flex-direction等属性无效；主轴由flex-direction决定，justify-content对齐主轴、align-items对齐交叉轴；flex缩写顺序为grow/shrink/basis；align-self仅对单个子项生效。
Flexbox 容器必须显式声明 display: flex 或 display: inline-flex
浏览器不会自动把普通 常见错误：在父元素上只加了 比如： 立即学习“前端免费学习笔记（深入）”； 写成 典型场景：侧边栏 + 主内容区布局，希望主内容区自适应剩余宽度且不压缩，侧边栏固定宽： 它不能用于控制多列对齐或网格式错位，只是微调某个子项在交叉轴上的位置。如果发现 flex-direction 或 justify-content 是无效的，样式会被忽略。
justify-content: center，子元素没居中——大概率漏了 display: flex。
display: flex 生成块级弹性容器（独占一行）display: inline-flex 生成行内弹性容器（可与其他行内元素并排）display: -webkit-flex 等旧前缀，现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）已原生支持标准语法
flex-direction 决定主轴方向，直接影响 justify-content 和 align-items 的行为justify-content 始终对齐主轴，align-items 始终对齐交叉轴。一旦改了 flex-direction，两个属性的作用方向就全反了。flex-direction: column 时，justify-content: center 是垂直居中，align-items: center 才是水平居中。
row（默认）：主轴水平向右，交叉轴垂直向下column：主轴垂直向下，交叉轴水平向右row-reverse / column-reverse：主轴反向，会影响 justify-content 的“起点”逻辑子项的
flex 缩写容易误用：三个值顺序是 flex-grow flex-shrink flex-basis
flex: 1 0 auto 和 flex: 1 表现完全不同：flex: 1 等价于 flex: 1 1 0%，会拉伸也会收缩；而 flex: 1 0 auto 表示不收缩（flex-shrink: 0），但按内容宽度（auto）分配初始空间。aside { flex: 0 0 240px; }
main { flex: 1 0 auto; }
flex-grow：剩余空间如何分配（0 = 不放大）flex-shrink：空间不足时是否缩小（0 = 不缩小）flex-basis：初始主轴尺寸（可为 auto、0px、50% 等）
align-self 可覆盖容器的 align-items，但仅对单个子项生效align-self 没效果，先确认容器是否设置了 display: flex 且有明确交叉轴（即不是 flex-direction: row 下又没设高度）。
Flexbox 的关键不在属性数量，而在主轴/交叉轴的思维切换。很多人卡住，是因为没意识到 auto（继承父容器 align-items）、flex-start、center、flex-end、stretch（默认，填满交叉轴）stretch 在子项有明确高度（如 height: 40px）时不会覆盖该高度justify-content 和 align-items 的作用方向完全由 flex-direction 绑定——改一个，另外两个就得同步重想。
