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本身。