【css知识】flex-grow: 1

flex-grow: 1是什么？ flex-grow 是 CSS Flexbox 布局中的一个重要属性

一、基本概念：

flex-grow 定义了 flex 项目的增长能力
它决定了当容器有多余空间时，项目如何分配这些空间
默认值是 0，表示不增长

二、工作原理：

/* 示例1：两个元素，一个会增长，一个不会 */
.container {display: flex;width: 1000px;
}
.item1 {width: 200px;flex-grow: 1;  /* 会增长 */
}
.item2 {width: 200px;flex-grow: 0;  /* 不会增长 */
}

容器总宽度：1000px
两个元素基础宽度：各 200px
剩余空间：1000px - 400px = 600px
由于 item1 的 flex-grow: 1，它会占据所有剩余空间
最终 item1 宽度：200px + 600px = 800px
item2 保持原宽度：200px

多个元素的情况：

.container {display: flex;width: 1000px;
}
.item1 {width: 200px;flex-grow: 1;  /* 增长比例为1 */
}
.item2 {width: 200px;flex-grow: 2;  /* 增长比例为2 */
}
.item3 {width: 200px;flex-grow: 1;  /* 增长比例为1 */
}

剩余空间：400px
总增长比例：1 + 2 + 1 = 4
item1 获得：400px × (1/4) = 100px
item2 获得：400px × (2/4) = 200px
item3 获得：400px × (1/4) = 100px

三、实际应用示例：

<template><div class="search-form"><!-- 标签固定宽度 --><span class="label">时间维度</span><!-- 选择器区域自适应 --><div class="selector-container"><!-- 类型选择器固定宽度 --><el-select style="width: 80px;"><!-- 选项 --></el-select><!-- 日期选择器自适应 --><el-date-picker style="flex-grow: 1;"><!-- 日期选择器内容 --></el-date-picker></div></div>
</template><style>
.search-form {display: flex;width: 100%;
}.label {width: 100px;  /* 固定宽度 */flex-shrink: 0;  /* 防止压缩 */
}.selector-container {display: flex;flex-grow: 1;  /* 占据剩余空间 */gap: 8px;  /* 元素间距 */
}
</style>

常见使用场景：

导航栏中 logo 固定，菜单项自适应
表单中标签固定，输入框自适应
列表项中图标固定，内容自适应
布局中侧边栏固定，主内容区自适应

注意事项：

flex-grow 只对剩余空间起作用
需要配合 display: flex 使用
通常与 flex-shrink 和 flex-basis 一起使用
考虑最小宽度（min-width）防止内容挤压

四、最佳实践：

/* 1. 基础布局 */
.container {display: flex;width: 100%;
}/* 2. 固定宽度元素 */
.fixed-item {width: 200px;flex-shrink: 0;  /* 防止压缩 */
}/* 3. 自适应元素 */
.flexible-item {flex-grow: 1;min-width: 0;  /* 允许内容收缩 */
}/* 4. 多列布局 */
.multi-column {display: flex;gap: 16px;
}.column {flex-grow: 1;min-width: 200px;  /* 最小宽度 */
}

五、与其他 flex 属性配合：

.flex-item {flex-grow: 1;      /* 增长比例 */flex-shrink: 0;    /* 收缩比例 */flex-basis: auto;  /* 基础大小 *//* 简写形式 */flex: 1 0 auto;
}

flex-grow: 1 是实现自适应布局的重要工具，它让元素能够自动填充剩余空间，特别适合需要响应式布局的场景。通过合理使用 flex-grow，可以创建灵活且自适应的界面布局。

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~