使用Flexbox的flex-grow或Grid的fr单位可实现子元素宽度自适应父元素，前者适用于一维布局按比例伸缩，后者适合二维布局精确划分空间。
要让CSS子元素的宽度自适应父元素，使用 Flexbox 或 CSS Grid 是最常用且高效的方式。下面分别介绍如何通过 flex-grow 和 fr 单位实现。
使用 Flexbox 和 flex-grow 实现自适应宽度
当父容器使用 display: flex 时，子元素会默认沿主轴排列，并可通过 flex-grow 属性决定其“拉伸”能力。
设置 flex-grow: 1 可让子元素填满父容器剩余空间，多个子元素可按比例分配宽度。
.parent {
display: flex;
width: 100%; /* 父元素宽度 */
}
.child {
flex-grow: 1; / 均匀填充可用空间 /
flex-basis: 0; / 可选：从0开始增长，更均匀分配 /
}
若想让某个子元素占更多宽度，例如一个占2份，另一个占1份：
立即学习“前端免费学习笔记（深入）”；
.child-1 { flex-grow: 2; }
.child-2 { flex-grow: 1; }
使用 CSS Grid 和 fr 单位实现自适应宽度
Grid 布局中，fr（fraction）单位表示“可用空间的一部分”，非常适合等分或按比例划分父容器宽度。
.parent {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列均分 */
width: 100%;
}
也可以设置不同比例：
.parent {
grid-template-columns: 2fr 1fr; /* 第一列是第二列的两倍宽 */
}
支持混合使用固定宽度和弹性单位：
.parent {
grid-template-columns: 100px 1fr 2fr; /* 固定 + 自适应 + 按比例 */
}
选择建议
根据布局需求选择合适方案：
- 需要一维布局（行或列）且子元素动态拉伸 → 使用 Flexbox + flex-grow
- 需要二维布局或精确控制网格列宽 → 使用 Grid + fr
- 现代布局推荐优先考虑语义清晰、控制力强的 Grid 方案
基本上就这些，两种方式都能很好地实现子元素宽度自适应父元素，关键是理解 flex-grow 的伸缩机制和 fr 的分数分配逻辑。不复杂但容易忽略细节。
