flex-grow: 1 占据父容器剩下的空间

 

你想在 flex 布局下让某个子元素占据父容器剩余宽度，可以用 flex-grow 或 flex: 1 来实现。

1️⃣ 基本示例

<div class="container">
  <div class="item">固定宽度</div>
  <div class="item flex-grow">占剩余宽度</div>
  <div class="item">固定宽度</div>
</div>

 

.container {
  display: flex;
  gap: 10px; /* 间距可选 */
}

.item {
  width: 100px; /* 固定宽度示例 */
  background-color: lightblue;
  text-align: center;
}

.flex-grow {
  flex-grow: 1; /* 占据剩余空间 */
  background-color: lightgreen;
}

✅ 解释：

• flex-grow: 1 表示这个子元素可以扩展，占据父容器剩下的空间。

• 如果父容器中有多个 flex-grow: 1 元素，它们会按比例分配剩余空间。

---

2️⃣ 使用简写 flex

.flex-grow {
  flex: 1; /* 相当于 flex-grow:1; flex-shrink:1; flex-basis:0 */
}

3️⃣ 如果前面的子元素是固定宽度或内容宽度

<div class="container">
  <div class="fixed">菜单</div>
  <div class="flexible">主内容，占剩余</div>
</div>

.container {
  display: flex;
}

.fixed {
  width: 200px;
}

.flexible {
  flex: 1;
}

这样主内容会自动占据除菜单外的所有剩余空间。

---

💡 补充：

• flex-basis 可以控制初始宽度，默认 0 或 auto。

• flex-shrink: 0 可以防止子元素缩小。

• min-width 可以防止占满剩余空间后太小。

---