flex容器需设width: 100%或max-width: 100%才能响应小屏，否则子元素flex: 1无效；须配合box-sizing: border-box、慎用min-width、显式声明flex-direction，嵌套层级越多越需逐层约束宽度。
flex容器必须设width: 100%或max-width才响应小屏
只给子元素设flex: 1或width: 100%没用，父级flex容器若没明确宽度，在小屏下可能仍按内容撑开。常见表现是嵌套块横向溢出、滚动条意外出现。
- 外层容器加
width: 100%或max-width: 100%（后者更安全，防拉伸） - 避免在
flex父容器上同时设min-width，尤其值大于320px时，小屏会被强制截断 - 如果父容器是
display: flex且又嵌套在position: absolute里，记得补left: 0; right: 0;来激活宽度约束
百分比宽度要配合box-sizing: border-box
用width: 50%这类值时，若子元素有padding或border，默认box-sizing: content-box会导致实际宽度超100%，小屏下直接换行或错位。
- 全局加
* { box-sizing: border-box; }最省事 - 或者单独给flex子项加
box-sizing: border-box，尤其当它们有padding: 1rem或border: 1px solid时 - 慎用
width: calc(50% - 1rem)来抵消内边距——小屏下1rem可能变成16px而非预期的8px，不如直接用flex分配+gap
flex-wrap和min-width冲突会导致小屏布局断裂
设了flex-wrap: wrap本意是让子项折行，但如果某个子项写了min-width: 200px，而屏幕只有375px宽，两个子项就无法并排，强行折行后间隙不可控，视觉上像“塌陷”。
- 小屏专用规则里，把
min-width降为min-width: 120px或干脆移除 - 用
@media (max-width: 480px)包裹，重置flex-direction: column比依赖wrap更可靠 -
flex-basis设flex-basis: 100%比width: 100%更能配合flex-wrap，尤其在多层嵌套时
嵌套flex中justify-content失效？检查是否漏了flex-direction
比如外层display: flex; justify-content: center;正常，但内部再套一层flex后，子项突然左对齐——大概率是内层没设flex-direction，它默认是row，而你的预期其实是column方向居中。
立即学习“前端免费学习笔记（深入）”；
- 嵌套层级超过2层时，每一层
flex容器都应显式声明flex-direction和align-items -
justify-content只控制主轴，小屏下主轴可能从水平变成垂直，需同步调整 - 避免用
margin: auto代替justify-content，它在嵌套flex里行为不稳定，尤其safari ios 15以下
小屏适配真正的难点不在百分比或flex本身，而在嵌套层级间宽度继承与约束传递被浏览器静默忽略——多一层嵌套，就要多一层width或max-width确认。