Flex布局中flex-grow属性如何应用_子元素弹性伸缩案例-css教程-PHP中文网

Flex布局中flex-grow属性如何应用_子元素弹性伸缩案例

P粉602998670

发布： 2025-11-03 05:47:17

原创

348人浏览过

flex-grow 控制子元素在容器剩余空间中的放大比例。默认值为0，不放大；设为大于0的数值时，按比例分配空间。例如，一个元素设为1，其余为0，则独占剩余空间；两个元素均为1则平分；一个为2、另一个为1则按2:1分配。实际应用中，如三栏布局，中间搜索框设 flex-grow: 1，两侧固定宽度，可实现自适应；多个元素按设定比例伸展，如红、绿、蓝块分别设1、2、3，即按1:2:3填充容器。掌握此规则可高效实现导航、表单等场景的弹性布局。

flex布局中flex-grow属性如何应用_子元素弹性伸缩案例

在Flex布局中，flex-grow 属性用于控制子元素在主轴方向上的弹性放大比例。当容器有剩余空间时，子元素会根据 flex-grow 的值按比例分配这些空间。

flex-grow 基本规则

flex-grow 默认值为 0，表示不放大。如果设置为大于0的数值，元素将按照该数值的比例伸展以填充容器的剩余空间。

例如：

一个子元素 flex-grow: 1，其余为0 → 该元素独占剩余空间
两个子元素都设为 flex-grow: 1 → 平分剩余空间
一个设为2，另一个设为1 → 按 2:1 的比例分配剩余空间

实际案例：三栏自适应布局

假设我们有一个导航区域，左侧是logo，中间是搜索框需要尽可能宽，右侧是菜单按钮。我们可以用 flex-grow 实现中间项自动撑大。

<div class="nav">
  <div class="logo">Logo</div>
  <div class="search">Search Box</div>
  <div class="menu">Menu</div>
</div>

CSS 样式如下：

.nav {
  display: flex;
}

.logo, .menu {
  width: 60px;
}

.search {
  flex-grow: 1;
  background: #eee;
  margin: 0 10px;
}

这里，.search 元素的 flex-grow: 1 表示它将占据除 logo 和 menu 固定宽度之外的所有可用空间，实现自适应效果。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

多个元素按比例伸展

如果有多个子元素设置了不同的 flex-grow 值，它们将按比例分配剩余空间。

比如三个等宽色块，希望红色占1份、绿色占2份、蓝色占3份：

.container {
display: flex;
}

.item1 { flex-grow: 1; background: red; }
.item2 { flex-grow: 2; background: green; }
.item3 { flex-grow: 3; background: blue; }

即使初始内容很小，这三个元素也会按 1:2:3 的比例拉伸填满容器。

基本上就这些。掌握 flex-grow 的比例分配逻辑，就能轻松实现各种自适应布局需求，特别适合导航、表单、卡片组件中的空间分配场景。

以上就是Flex布局中flex-grow属性如何应用_子元素弹性伸缩案例的详细内容，更多请关注php中文网其它相关文章！