【css知识】flex-grow: 1

一、基本概念：

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，可以创建灵活且自适应的界面布局。

🚀写在最后

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