css flex-grow为0与为1区别-css教程-PHP中文网

css flex-grow为0与为1区别

P粉602998670

发布： 2025-10-30 16:11:18

原创

929人浏览过

flex-grow: 0 表示不扩展，保持内容或设定宽度，如 item-a 保持100px；flex-grow: 1 表示扩展并分配剩余空间，如 item-b 占据400px；两者结合可实现固定与自适应布局。

css flex-grow为0与为1区别

当使用 CSS Flexbox 布局时，flex-grow 属性决定了子元素在容器中有剩余空间时，是否以及如何放大。理解 flex-grow: 0 和 flex-grow: 1 的区别，对控制布局伸缩性非常重要。

默认情况下，flex 增长因子是 0，表示该子项不会占用容器的剩余空间。即使父容器还有空白区域，这个子元素也不会拉伸。

这意味着它的尺寸主要由其内容或设置的 width 决定。

设置为 1 时，该子项会等比地占用容器中所有剩余空间。如果有多个子项都设为 flex-grow: 1，它们将平分剩余空间。

假设有一个宽度为 500px 的 flex 容器，内含两个子元素，宽度各为 100px：

魔乐社区

天翼云和华为联合打造的AI开发者社区，支持AI模型评测训练、全流程开发应用

102

对应的 CSS：

.container {
  display: flex;
  width: 500px;
}
.item-a {
  width: 100px;
  flex-grow: 0;
}
.item-b {
  width: 100px;
  flex-grow: 1;
}

登录后复制

结果：A 保持 100px 宽，B 会扩展到占据剩下的 400px。

如果两个都设为 flex-grow: 1，那么它们都会从 100px 拉伸到 250px，平均分配剩余空间。

基本上就这些。灵活运用这两个值，可以实现从固定侧边栏到全屏自适应的各种布局。

以上就是css flex-grow为0与为1区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：