使用Flexbox的flex-grow或Grid的fr单位可实现子元素宽度自适应父元素，前者适用于一维布局按比例伸缩，后者适合二维布局精确划分空间。
要让CSS子元素的宽度自适应父元素，使用 Flexbox 或 CSS Grid 是最常用且高效的方式。下面分别介绍如何通过 flex-grow 和 fr 单位实现。
当父容器使用 display: flex 时，子元素会默认沿主轴排列，并可通过 flex-grow 属性决定其“拉伸”能力。
设置 flex-grow: 1 可让子元素填满父容器剩余空间，多个子元素可按比例分配宽度。
.parent {
display: flex;
width: 100%; /* 父元素宽度 */
}
<p>.child {
flex-grow: 1; /<em> 均匀填充可用空间 </em>/
flex-basis: 0; /<em> 可选：从0开始增长，更均匀分配 </em>/
}
若想让某个子元素占更多宽度，例如一个占2份，另一个占1份：
立即学习“前端免费学习笔记（深入）”；
.child-1 { flex-grow: 2; }
.child-2 { flex-grow: 1; }
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; /* 固定 + 自适应 + 按比例 */
}
根据布局需求选择合适方案：
基本上就这些，两种方式都能很好地实现子元素宽度自适应父元素，关键是理解 flex-grow 的伸缩机制和 fr 的分数分配逻辑。不复杂但容易忽略细节。
以上就是css子元素宽度自适应父元素如何实现_Flexbox flex-grow或Grid fr单位的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
975
收藏
取消收藏
