css Flexbox伸缩属性flex-grow与flex-shrink-css教程-PHP中文网

css Flexbox伸缩属性flex-grow与flex-shrink

P粉602998670

发布： 2025-10-26 09:54:01

原创

904人浏览过

flex-grow定义项目在有剩余空间时的扩展比例，默认0不扩展，大于0按比例分配；flex-shrink定义空间不足时的收缩能力，默认1可收缩，数值越大收缩越多，常与flex-basis结合通过flex简写设置，实现自适应布局。

css flexbox伸缩属性flex-grow与flex-shrink

在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的重要属性。它们共同决定了弹性项目在主轴方向上的尺寸变化行为。

该属性决定一个弹性项目在有剩余空间时，能分配到多少比例的额外空间。

• 默认值为 0，表示不扩展。 • 设置为大于 0 的数值时，项目将按比例扩展以填充容器的剩余空间。 • 比如两个子项分别设置 flex-grow: 1 和 flex-grow: 2，则后者将获得两倍于前者的扩展空间。

示例：

假设容器宽度为 500px，两个子项原始宽度各为 100px，总占 200px，剩余 300px。若两者 flex-grow 都设为 1，则平分剩余空间，各得 150px，最终宽度为 250px。

当所有子项的总宽度超过容器时，该属性决定项目被压缩的程度。

HTML+CSS+jQuery实现Flex悬停滑块

一款HTML+CSS+jQuery实现的Flex悬停滑块特效

131

• 默认值为 1，表示可正常收缩。 • 设为 0 表示不收缩，即使超出容器也不缩小。 • 数值越大，收缩程度越高。例如 flex-shrink: 2 的项目比 flex-shrink: 1 的项目缩得更多。

注意：实际收缩量不仅取决于 flex-shrink 值，还与项目本身的基准尺寸（flex-basis 或 width）有关。

通常我们不会单独写 flex-grow 和 flex-shrink，而是通过简写属性 flex 来同时设置。

• flex: 1 等价于 flex: 1 1 0% （常用于等分布局） • flex: 2 1 0% 表示 grow=2, shrink=1, basis=0% • flex: none 表示不伸缩，等价于 flex: 0 0 auto

合理设置这两个属性，可以实现灵活、自适应的布局效果，比如导航栏均分、侧边栏固定主内容区自适应等场景。

基本上就这些，掌握 flex-grow 和 flex-shrink 的比例机制，就能更精准控制 Flexbox 中的空间分配。

以上就是css Flexbox伸缩属性flex-grow与flex-shrink的详细内容，更多请关注php中文网其它相关文章！

大家都在看：