flex 容器中 justify-content 控制主轴对齐（默认水平），align-items 控制交叉轴对齐（默认垂直）；垂直居中需用 align-items 而非 justify-content，且父容器需有高度；flex: 1 等价于 flex: 1 1 0，基准为 0，可能压缩内容；需收缩时应设 min-width: 0。
flex 容器的 justify-content 和align-items别混用场景
横向布局靠 justify-content，纵向对齐靠align-items——但很多人一写 垂直居中 就死磕 justify-content: center，结果没反应。原因是它只管主轴（默认是水平），而垂直方向是交叉轴，得用align-items（容器设为display: flex 且子项为块级时才生效）。
常见错误现象：justify-content: center在单行 flex 里让子项水平居中，但父容器高度没设、或子项没撑高，看起来“没居中”，其实是容器本身没高度，不是属性失效。
- 主轴方向由
flex-direction决定：默认row（主轴水平），此时justify-content管左右，align-items管上下 - 若改成
flex-direction: column，两者作用轴互换 -
align-content只在多行 flex（flex-wrap: wrap且内容超出一行）时起作用，单行无效
flex: 1不是“均分剩余空间”的万能解
flex: 1等价于 flex: 1 1 0，即flex-grow: 1、flex-shrink: 1、flex-basis: 0。关键在flex-basis: 0——它把基准宽度 / 高度重置为 0，再按比例分配剩余空间。但如果你希望保留子项自身内容宽度（比如按钮文字长度），直接写flex: 1 反而会压缩内容。
使用场景：侧边栏 + 主内容区，想让主内容区填满剩余宽度，且不因文字变长而溢出，这时 flex: 1 合适；但如果几个按钮并排，又想等宽又不想压扁文字，该用 flex: 1 1 auto 或显式设flex-basis。
立即学习 “ 前端免费学习笔记（深入）”；
-
flex: 1 1 auto：先按内容宽度渲染，再均分剩余空间（更符合直觉） -
flex: 0 0 auto：完全不伸缩，适合固定尺寸组件（如头像、图标） - 多个
flex: 1子项，实际分配比例由flex-grow值决定，不是数量比
flex 子项 min-width: 0 常被忽略的截断问题
flex 子项默认有 min-width: auto（块级元素特性），遇到窄容器时不会缩小到内容以下，导致换行或溢出。比如一个flex: 1 的
解决方法 很简单：给需要收缩的子项加 min-width: 0（或min-width: 0px）。配合word-break: break-all 或overflow-wrap: break-word才能真正实现“内容自适应”。
- 仅对
display: flex子项生效，不影响普通块元素 - Chrome/Firefox/Safari 都支持，无需前缀
- 如果用了
flex: 1但内容仍溢出，第一反应查min-width，而不是调flex-basis
嵌套 flex 容器要注意 flex-shrink 的连锁压缩
外层 flex 设了flex: 1，内层又套 flex，如果内层子项没控好flex-shrink，可能触发多层收缩：外层压缩→内层容器变窄→内层子项再压缩→文字叠在一起。典型表现是响应式菜单在小屏下突然“糊成一团”。
性能影响不大，但调试极难定位——因为控制台看到的宽度是计算后值，看不出哪一层开始缩。
- 对不需要收缩的内层容器，显式设
flex-shrink: 0 - 避免连续三层以上 flex 嵌套，超过两层建议用
grid替代部分逻辑 - 用开发者 工具 的“Layout”面板逐层检查
flex-basis和实际尺寸差，比看 CSS 声明更直观
flex 空间分配真正难的不是语法，而是理解 flex-basis 如何与内容尺寸博弈，以及 min-width 这种隐式约束的存在。很多“不生效”其实卡在浏览器默认行为上，而不是 flex 本身。
