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

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

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

理解 flex-grow：扩展填充剩余空间

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

例如：

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

立即学习“前端免费学习笔记（深入）”；

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

理解 flex-shrink：压缩避免溢出容器

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

示例：

Logomaster.ai

Logo在线生成工具

99

查看详情

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

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

结合使用 flex-grow 与 flex-shrink

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

比如：

这等价于：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 200px

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

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

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