首页 > 文章 > 前端

flex-grow属性在CSS中的作用是控制弹性盒子（Flexbox）中子元素的扩展比例。当父容器有剩余空间时，flex-grow属性决定了每个子元素如何分配这些空间。具体来说，flex-grow的值是一个数字，表示该元素在可用空间中所占的比例。例如，如果一个子元素的flex-grow设置为2，而另一个子元素的flex-grow设置为1，那么前者将占据两倍于后者的剩余空间。这个属性使得在不同屏幕尺

时间：2025-12-10 19:05:46 102浏览收藏

推广推荐

支持 PC / 移动端，安全直达

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS中flex-grow属性的作用是什么？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

flex-grow用于设置flex子元素的扩展比例，值为无单位数字，默认0；当容器有剩余空间时，子元素按flex-grow数值比例分配空间，如item1设为1、item2设为2，则二者按1:2比例分配，实现自适应布局。

css中flex-grow属性是什么

flex-grow 属性用于设置一个弹性盒子（flex item）的扩展比例，决定它在容器中有剩余空间时能占用多少额外空间。

flex-grow 的基本作用

当父容器的 display 为 flex 且所有子元素是 flex items 时，flex-grow 控制子元素如何拉伸填满剩余空间。它的值是一个无单位的数字，默认值是 0。

如果一个子元素的 flex-grow 设为 1，而其他子元素为 0，那么这个子元素将占据所有剩余空间。

使用示例

假设有一个 flex 容器和两个子项：

CSS 样式如下：

.container {
  display: flex;
}

.item1 {
  width: 100px;
  flex-grow: 1;
}

.item2 {
  width: 100px;
  flex-grow: 2;
}

此时，.item1 和 .item2 初始宽度都是 100px。如果容器总宽为 400px，剩余空间为 200px。这两个子项将按比例分配：item1 占 1/3，item2 占 2/3。最终 item1 拉伸到约 166.7px，item2 拉伸到约 233.3px。

关键点总结

flex-grow 只在有剩余空间时起作用
值越大，分得的剩余空间越多
值为 0 表示不参与扩展
计算方式是基于比例，不是固定像素

基本上就这些。flex-grow 看似简单，但在布局中非常实用，特别适合做自适应宽度的组件。

今天关于《flex-grow属性在CSS中的作用是控制弹性盒子（Flexbox）中子元素的扩展比例。当父容器有剩余空间时，flex-grow属性决定了每个子元素如何分配这些空间。具体来说，flex-grow的值是一个数字，表示该元素在可用空间中所占的比例。例如，如果一个子元素的flex-grow设置为2，而另一个子元素的flex-grow设置为1，那么前者将占据两倍于后者的剩余空间。这个属性使得在不同屏幕尺寸和设备上能够更灵活地布局和调整元素的大小，从而提升用户体验和页面的适应性。》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS的内容请关注golang学习网公众号！

CSS