DT走过的路

1. 作用

flex-grow 是弹性子项属性，控制剩余空间如何分配：

• 默认值 flex-grow: 0：子项不自动占剩余宽度，宽度由自身内容决定；
• flex-grow: 1：平分父容器所有剩余空白区域，填满一行。

2. 使用前提

父元素必须先写 display: flex，子元素才能生效。

3. 基础场景使用

场景 1：左右两块，中间自动撑满（最常用）

<div style="display:flex; width:100%;">
  <div style="width:100px;">左侧固定</div>
  <!-- flex-grow:1 吃掉中间所有空白 -->
  <div style="flex-grow:1;">中间自适应填满</div>
  <div style="width:100px;">右侧固定</div>
</div>

效果：左右固定 100px，中间自动填充剩下全部宽度。

场景 2：多元素均分宽度

<div style="display:flex;">
  <div style="flex-grow:1;">A</div>
  <div style="flex-grow:1;">B</div>
  <div style="flex-grow:1;">C</div>
</div>

三个盒子平分整行宽度，三等分。

场景 3：比例分配空间（数字代表权重）

<div style="display:flex;">
  <div style="flex-grow:1;">占1份</div>
  <div style="flex-grow:2;">占2份</div>
</div>

总权重 = 1+2=3；

剩余空间：第一个拿 1/3，第二个拿 2/3。

4. 简写 flex: 1

日常不会单独写 flex-grow:1，统一简写：

flex: 1;
/* 等价于 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

推荐直接用 flex:1。

5. 业务场景

1. 搜索栏：左边文字，中间输入框自适应

<div style="display:flex;align-items:center;">
  <span>关键词：</span>
  <input style="flex:1;margin:0 10px;" />
  <button>查询</button>
</div>

1. 表格单元格、弹窗底部按钮栏
2. 侧边栏 + 主内容布局

<div style="display:flex;height:100vh;">
  <div style="width:220px;background:#f5f5f5;">侧边栏</div>
  <div style="flex:1;">主体内容，自动占满剩余高度</div>
</div>

1. 卡片内标题 + 操作按钮左右分开

<div style="display:flex;justify-content:space-between;align-items:center;">
  <h3>标题</h3>
  <div>操作按钮</div>
</div>
/* 换成flex-grow写法，效果一样 */
<div style="display:flex;align-items:center;">
  <h3 style="flex:1;margin:0;">标题</h3>
  <div>操作按钮</div>
</div>

6. 关键注意点

1. 只对子元素生效，父元素 display:flex 缺一不可；
2. 只分配剩余空白，不会压缩自身最小内容宽度；
3. 如果子元素内容超长，会撑开盒子，可搭配 overflow:hidden 文字省略；

flex:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;