通过灵活运用flex-grow、flex-shrink和百分比宽度可实现Flexbox子元素宽度自适应：flex-grow控制子元素在容器剩余空间中的放大比例，flex-shrink定义其超出时的压缩比例，flex-basis或width设置初始尺寸；例如左侧导航设width:25%，右侧主内容设flex:1即可自动填充剩余空间；关键区域可通过flex-shrink:0防止压缩，结合min-width避免溢出；输入框与按钮布局中，输入框设flex:1自适应，按钮设flex-shrink:0和固定宽度以保持尺寸不变；合理组合这些属性能高效应对多数响应式布局需求。
在使用 Flexbox 布局时，让子元素宽度自适应是常见需求。通过灵活运用 flex-grow、flex-shrink 和 百分比宽度，可以实现精确又响应式的布局效果。
理解 flex-grow 与 flex-shrink 的作用
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。掌握前两个属性是实现自适应的关键：
- flex-grow：定义子元素的放大比例。默认为 0，即不自动拉伸。设为 1 或更高时，容器剩余空间会按比例分配给子元素。
- flex-shrink：定义子元素的缩小比例。当子元素总宽度超出容器时，按此比例压缩。默认为 1，设为 0 可禁止压缩。
- flex-basis：设置子元素的初始主轴尺寸，可替代 width 起作用，支持像素、百分比等单位。
例如：flex: 1 1 200px 表示可伸缩、初始宽度 200px；而 flex: 1 等价于 flex: 1 1 0%，常用于平均分配剩余空间。
百分比宽度与 flex 的结合使用
有时需要固定部分子元素的宽度（如侧边栏），其余内容区域自适应填充。这时可将固定宽度用百分比设定，再配合 flex-grow 实现动态扩展。
- 给某个子元素设置 width: 30% 或 flex-basis: 30%，作为基准宽度。
- 另一个子元素设置 flex: 1，它会占据剩余所有空间。
- 即使容器变窄，flex-shrink 机制也会自动压缩内容区域，避免溢出。
示例场景：左侧导航宽 25%，右侧主内容自适应填充：
.container {
display: flex;
}
.sidebar {
width: 25%;
}
.main {
flex: 1;
}
控制不可压缩区域的技巧
某些情况下，你不希望某个子元素被压缩，比如包含关键按钮或文本的区域。
- 设置 flex-shrink: 0 可防止该元素被挤压。
- 搭配 min-width 使用更安全，防止内容过长时出现溢出或换行。
- 若多个元素都设为不收缩，超出部分仍会导致容器溢出，需结合外层容器 overflow 处理。
比如一个输入框加按钮的组合：.input { flex: 1; } 让其自适应拉伸，.btn { flex-shrink: 0; width: 80px; } 保持按钮固定宽。
基本上就这些。合理搭配 flex-grow、flex-shrink 和百分比，能应对大多数自适应布局需求，既简洁又高效。
