通过设置flex-shrink:0防止关键元素被压缩，并使用flex-wrap:wrap实现子元素换行，结合min-width与flex-basis控制尺寸，可有效解决容器宽度不足时的布局问题，提升页面自适应能力。
当使用 css Flex 布局时，如果容器宽度不足，子元素可能会被挤压变形或溢出容器。为了解决这个问题，可以通过 flex-shrink 或 flex-wrap 来控制子项的行为，让布局更灵活、自适应。
使用 flex-shrink 避免内容被过度压缩
默认情况下，flex 项目会自动缩小（flex-shrink: 1），以适应容器宽度。但如果某些内容不能被压缩（如图片、固定宽度的组件），就会导致显示异常。
解决方法：
- 将关键子元素的 flex-shrink 设置为 0，防止其被压缩。
- 允许其他非关键元素承担压缩责任。
示例代码：
.container { display: flex; } <p>.item-fixed { flex-shrink: 0; /<em> 不允许缩小 </em>/ width: 200px; }</p><p>.item-flexible { flex-shrink: 1; /<em> 允许缩小 </em>/ }</p>使用 flex-wrap 换行显示避免溢出
当所有子项无法在一行内放下时，可以让它们换行显示，而不是挤在一起或超出容器。
立即学习“前端免费学习笔记（深入）”；
解决方法：
- 给 flex 容器设置 flex-wrap: wrap，允许子项折行。
- 结合 min-width 控制每个子项最小宽度，提升可读性。
示例代码：
.container { display: flex; flex-wrap: wrap; } <p>.item { min-width: 150px; flex: 1 1 200px; /<em> 可伸缩，基础宽度 200px </em>/ }</p>这样，当容器宽度不足时，子项会自动换到下一行，形成类似网格的响应式布局。
结合使用更灵活
实际开发中，可以同时使用 flex-shrink 和 flex-wrap 实现更智能的布局调整。
- 对不可压缩内容禁用 shrink。
- 开启 wrap 让整体布局在窄屏下依然可用。
- 配合 flex-basis 设置理想宽度，增强控制力。
基本上就这些。合理设置 flex 子项的收缩性和换行策略，能有效应对容器宽度不足的问题，让页面更具弹性。