Flex布局天生支持父容器宽度不固定时的自适应，关键在于合理设置flex属性：启用display: flex、允许flex-wrap换行、用flex-shrink控制压缩、以flex-grow/basis分配剩余空间。
父容器宽度不固定时，Flex 布局本身完全支持自适应——它天生就是为动态尺寸设计的。关键不在“固定宽度”，而在于合理设置 flex 相关属性，让子项根据可用空间自动伸缩、换行或收缩。
确保父容器启用 flex 且不强制限制宽度
父容器只需声明 display: flex，无需设 width。浏览器会根据内容或父级（如 body）自然撑开或收缩。避免意外限制：
- 检查是否误加了
width: 0、min-width: 100%或overflow: hidden等影响布局的样式 - 若父容器是内联元素（如
span），先改为display: inline-flex或块级显示 - 浮动（
float）、绝对定位（position: absolute）会使 flex 失效，需移除
用 flex-shrink 控制子项是否压缩
默认所有子项可收缩（flex-shrink: 1），当总宽度超容器时会等比缩小。若某子项不该被压缩（如图标、固定文字），设：
-
flex-shrink: 0—— 禁止压缩，保持自身最小宽度 - 配合
min-width: fit-content或具体值（如min-width: 80px），防止内容被挤变形
用 flex-wrap 允许子项换行
当父容器变窄，单行放不下时，启用换行可避免子项强行挤压：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap—— 子项自动折行，形成多行弹性流 - 搭配
justify-content: center或space-between可优化每行对齐 - 每行子项宽度建议用
flex: 1 1 auto或设最大宽（如max-width: 200px），提升响应性
用 flex-basis + flex-grow 精确分配空间
不依赖固定像素，用相对单位分配剩余空间：
-
flex: 0 1 auto→ 不放大、可收缩、按内容宽 -
flex: 1→ 等价于flex: 1 1 0，均分剩余空间 -
flex: 2 1 0和flex: 1 1 0→ 按 2:1 占据剩余空间 -
flex-basis: 20%配合flex-grow: 1→ 以 20% 为基准再弹性拉伸
不复杂但容易忽略：Flex 的自适应能力，取决于你是否让子项“愿意伸、能够缩、懂得换行”。删掉硬编码宽度，交出控制权，flex 自然响应。
