子元素小屏被压缩因flex-shrink:1且无min-width约束；需min-width设下限（如280px），flex-basis仅作初始尺寸；关键内容用flex:0 0 auto加min-width双保险。
子元素在小屏幕被压缩，本质是 Flex 容器默认允许子项收缩（flex-shrink: 1），且未设最小宽度约束。仅靠 flex-basis 不够，必须配合 min-width 或 flex-shrink: 0 才能守住尺寸底线。
明确 flex-basis 和 min-width 的分工
flex-basis 是主轴上的“初始尺寸”，仅在分配剩余空间前起作用；它不阻止压缩。min-width（或 min-height）才是真正的“不可突破下限”，浏览器会优先保障它不被挤破。
- 想让卡片最小保持 280px 宽 → 设
min-width: 280px - 同时设
flex-basis: 33%是为了在大屏下合理均分，小屏时由min-width主导 - 避免只写
flex: 1 1 33%—— 这等价于flex-shrink: 1，仍会压缩
用 flex-shrink: 0 + min-width 双保险
当子项内容重要（如按钮、输入框、图标），不能变形或文字换行，直接禁用收缩更可靠：
-
flex: 0 0 auto→ 禁止伸缩，尺寸由内容或显式宽高决定 - 再加
min-width: 120px防止内容极窄时塌陷 - 对图片/图标类元素，还可加
max-width: 100%防溢出容器
响应式中动态调整 min-width
固定 min-width 可能在某些断点显得僵硬。可结合媒体查询分级控制：
- 小屏（min-width: 140px（保证按钮可点）
- 中屏（480–768px）：
min-width: 200px - 大屏：去掉
min-width，交由flex-basis或网格布局管理
检查父容器是否限制了 flex 容器行为
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 父级设了
overflow: hidden，导致子项被裁切而非换行 - Flex 容器本身没设
flex-wrap: wrap，所有子项强行挤在一行 - 子项有
white-space: nowrap，文字不折行，进一步加剧挤压
建议：小屏优先启用换行，例如 display: flex; flex-wrap: wrap;，再控制单个子项的最小尺寸。
