使用 flex:1 可实现子元素等宽自适应，通过设置不同 flex-grow 值可按比例分配宽度，如 2:1；固定宽度与自适应结合时，侧边栏设 width 或 flex-basis，主内容用 flex:1 撑满剩余空间；为防溢出，可添加 min-width:0、word-break 等控制样式，核心是掌握 flex 属性对空间分配的影响。
在使用 CSS Flexbox 布局时，让子元素自适应宽度是一个常见需求。核心在于正确设置父容器的 display: flex 以及子元素的弹性行为属性，如 flex-grow、flex-shrink 和 flex-basis。
1. 使用 flex: 1 实现等宽自适应
最简单的方法是给所有子元素设置 flex: 1，这样它们会平分父容器的可用空间。
示例：
父容器：
display: flex;
每个子元素：
flex: 1;
此时无论有多少个子元素，它们都会均分容器宽度，自动适应内容区域变化。
2. 不等比分配宽度（如 2:1）
如果希望子元素按比例分配宽度，可以设置不同的 flex-grow 值。
立即学习“前端免费学习笔记（深入）”；
示例：左侧占 2/3，右侧占 1/3- 左侧子元素：flex: 2;
- 右侧子元素：flex: 1;
这里的 flex 缩写同时设置了 grow、shrink 和 basis，默认 flex-basis 为 0%，实现基于比例的空间分配。
3. 固定部分 + 自适应部分布局
常见于侧边栏固定宽度，主内容区自动填充剩余空间。
示例：- 侧边栏：width: 200px; （或 flex-basis: 200px）
- 主内容：flex: 1;
只要父容器是 flex 模式，主内容区域会自动撑开，填满剩余宽度。
4. 防止内容溢出或压缩过度
有时文本或内容会导致子元素异常拉伸或压缩，可通过以下方式控制：
- 设置 min-width: 0 在子元素上，允许其在 flex 容器中被压缩
- 使用 min-width 或 max-width 限制极端情况
- 对文字内容添加 word-break: break-all 或 overflow: hidden
基本上就这些常用方法。关键是理解 flex 属性如何影响子元素的空间分配行为。合理组合 flex-grow 和基础尺寸，就能实现灵活的自适应布局。不复杂但容易忽略细节。
