如何在CSS中使用布局制作弹性盒子布局_Flexbox flex-grow和flex-shrink应用_技术学堂

如何在CSS中使用布局制作弹性盒子布局_Flexbox flex-grow和flex-shrink应用

发布时间：2025-11-30 19:59

发布者：网络

浏览次数：

flex-grow决定子元素扩展比例，flex-shrink控制收缩比例，两者结合flex-basis通过flex简写设置，实现响应式布局。

如何在css中使用布局制作弹性盒子布局_flexbox flex-grow和flex-shrink应用

弹性盒子布局（Flexbox）是CSS中一种强大的布局模型，特别适合在容器内对子元素进行灵活的尺寸分配与对齐。其中 flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应可用空间的关键属性。

当容器中有剩余空间时，flex-grow 决定子元素按比例扩展的程度。默认值为 0，表示不扩展。

例如：

.container {
display: flex;
}
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }

此时，.item2 将获得两倍于 .item1 或 .item3 的额外空间。三者按 1:2:1 的比例分配剩余空间。

如果所有项目的 flex-grow 都设为 1，则它们均分剩余空间，实现等宽自适应布局。

当子元素总宽度超过容器时，flex-shrink 控制它们如何收缩。默认值为 1，表示允许按比例缩小。

示例：

.container {
display: flex;
width: 300px;
}
.item1 { width: 200px; flex-shrink: 1; }
.item2 { width: 200px; flex-shrink: 2; }

总宽度 400px 超出容器 100px。由于 .item2 的 flex-shrink 是 .item1 的两倍，它将被压缩得更多，减少的空间按 1:2 比例分摊。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

若设置 flex-shrink: 0，则该项目不会被压缩，保持原始尺寸（可能造成溢出）。

这两个属性常与 flex-basis 一起使用，通过 flex 简写属性统一设置。

比如：

.item { flex: 1 1 200px; }

这等价于：

表示项目从 200px 开始，可放大也可缩小，适合用于卡片、导航项等需要响应式调整的场景。

基本上就这些。掌握 flex-grow 和 flex-shrink 的比例机制，能让你更自如地构建动态、响应式的 Flexbox 布局。不复杂但容易忽略细节。

以上就是如何在CSS中使用布局制作弹性盒子布局_Flexbox flex-grow和flex-shrink应用的详细内容，更多请关注其它相关文章！