Flexbox适用于一维布局（如按钮组、导航栏），二维布局应选Grid；避免深层嵌套、混用margin与gap、忽略父容器宽度；主轴由flex-direction决定，justify-content控制主轴，align-items控制交叉轴。
Flexbox 什么时候该用，什么时候不该用
一维布局场景下（比如按钮组、导航栏、表单字段对齐），display: flex 是最直接有效的解法；但要是想做二维网格（比如卡片瀑布流、复杂仪表盘），别硬套 Flex，display: grid 才是正解。
常见错误现象：flex 嵌套三层以上就开始失控，子元素 margin 和 flex 的 gap 混用导致间距错乱，或者给 flex 容器设了 width: 100% 却忘了父容器没设宽，结果整个塌陷。
- 只在明确需要「沿主轴/交叉轴对齐 + 自适应伸缩」时启用 Flex
- 避免用
flex实现多行等高卡片——grid的align-items: stretch更稳 - 移动端小屏下慎用
flex-wrap: nowrap，容易触发横向滚动而不自知
justify-content 和 align-items 别搞反主轴和交叉轴
justify-content 控制主轴（flex-direction 决定方向），align-items 控制交叉轴。很多人调了半天居中没效果，其实是把两个属性当“水平/垂直”来记，忽略了 flex-direction: column 时主轴已变成纵向。
使用场景：水平居中按钮、顶部对齐头像+文字、底部固定操作栏。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row（默认）→ 主轴水平 →justify-content管左右，align-items管上下 -
flex-direction: column→ 主轴垂直 →justify-content管上下，align-items管左右 - 要让单个子项单独对齐？别动容器属性，改它的
align-self
flex: 0 1 auto 和 flex: 1 的区别不是“要不要伸缩”，而是“怎么伸缩”
flex 是 flex-grow、flex-shrink、flex-basis 的简写，三者顺序固定，不能省略中间项。写成 flex: 1 相当于 flex: 1 1 0，而 flex: 0 1 auto 是默认值，意味着“不放大、可缩小、按内容宽”。很多布局错乱，是因为误以为 flex: 1 只是“占满剩余空间”，却没意识到它会把 flex-basis 设为 0，直接抹掉原有宽度。
性能影响：大量使用 flex: 1 且子元素含图片或异步内容时，可能触发多次重排。
- 想让某项“尽可能撑开”又保留自身最小宽度？用
flex: 1 1 auto - 想让它“严格按比例分剩余空间”？确认
flex-basis是0或统一设为相同值 - 防止图片被压扁：给
img加flex-shrink: 0，否则默认flex-shrink: 1会压缩它
flex-wrap: wrap 下的换行和对齐容易被忽略的细节
设了 flex-wrap: wrap 后，justify-content 只作用于每一行内部，跨行对齐得靠 align-content。但这个属性默认是 stretch，如果所有行高度不一致，又没设 align-content，就会出现“第一行贴顶、第二行悬空”的诡异现象。
兼容性注意：IE10/11 对 align-content 支持不稳定，老项目需测试。
- 多行居中？容器加
align-content: center，不是align-items - 最后一行左对齐？
align-content: flex-start+justify-content: flex-start - 想让换行后每行高度一致？给子项统一设
align-self: stretch，或改用grid
Flex 的核心其实就两件事：确定主轴方向，再决定每个孩子在主轴和交叉轴上怎么分配空间。真正难的不是语法，是每次写之前，先问自己一句：这个容器的主轴到底朝哪？
