答案：通过flex-grow、flex-shrink和flex-basis协同控制子元素伸缩行为，实现宽度自适应布局。
在使用 Flexbox 布局时，子元素的宽度自适应是常见需求。通过 flex-grow、flex-shrink 和 flex-basis 三个属性的组合控制，可以灵活实现各种自适应效果。它们共同作用于 flex 容器中的项目，决定其如何分配剩余空间或收缩以适应容器。
flex-basis：设置初始主轴尺寸
flex-basis 决定子元素在分配多余空间前的初始大小，相当于“基准宽度”。它可以是长度值（如 100px、20%），也可以是 auto（默认值）。
- 当设为
flex-basis: 0时，元素不占基础空间，剩余空间完全由 grow 分配 - 设为
flex-basis: auto时，元素先按内容宽度占据空间，再分配剩余部分 - 设为具体值如
200px，则以此为基础进行伸缩
flex-grow：定义扩展比例
flex-grow 控制子元素如何拉伸以填充容器中剩余的空间。默认值为 0，表示不扩展。
- 若所有子项
flex-grow: 1，则平均分配剩余空间 - 某个子项设为
flex-grow: 2，其余为 1，则前者获得双倍扩展空间 - 值为 0 的项不会扩展，保持原有尺寸
flex-shrink：定义收缩能力
flex-shrink 决定当空间不足时，子元素的收缩比例，默认值为 1。
- 值越大，收缩越多；设为 0 表示不收缩
- 例如：一个元素
flex-shrink: 2，另一个为 1，则前者收缩量是后者的两倍 - 常用于防止某些元素被压缩，可将其设为
flex-shrink: 0
常用组合实践
实际开发中，通常直接使用 flex 简写属性来同时设置这三个值，语法为：flex: [grow] [shrink] [basis]。
-
flex: 1等价于flex: 1 1 0%—— 占满剩余空间，可伸缩，基础宽度为0 -
flex: 0 1 auto—— 不扩展，可收缩，基于内容宽度 -
flex: none相当于flex: 0 0 auto—— 不伸展也不收缩，固定尺寸 -
flex: 2 1 150px—— 扩展权重为2，可收缩，基础宽度150px
比如要实现一个左侧固定200px、右侧自适应的布局：
.container {
display: flex;
}
.sidebar {
flex: 0 0 200px; /* 不伸缩，固定200px */
}
.main {
flex: 1; /* 占据剩余全部空间 */
}
基本上就这些。理解 grow、shrink、basis 的协作逻辑，就能精准控制 Flex 子元素的自适应行为，避免意外的溢出或压缩问题。
