Flexbox 是一种强大的 CSS 布局模型，用于创建灵活的、响应式的布局。flex-grow、flex-shrink 和 flex-basis 是 Flexbox 中的关键属性，用于控制 Flex 项目的大小和行为。flex 是这三个属性的简写形式。本文将详细介绍这些属性的作用、用法以及实际应用场景。

---

1. flex-grow

作用：

• 定义 Flex 项目在容器中的扩展比例。
• 当容器有剩余空间时，flex-grow 决定项目如何分配这些空间。

取值：

• 默认值：0（不扩展）。
• 正数：表示项目的扩展比例。

示例：

.item {
  flex-grow: 1; /* 项目将扩展以填充剩余空间 */
}

说明：

• 如果所有项目的 flex-grow 都为 1，它们将等分剩余空间。
• 如果一个项目的 flex-grow 为 2，其他项目为 1，则前者将获得两倍的剩余空间。

---

2. flex-shrink

作用：

• 定义 Flex 项目在容器中的收缩比例。
• 当容器空间不足时，flex-shrink 决定项目如何收缩。

取值：

• 默认值：1（允许收缩）。
• 正数：表示项目的收缩比例。
• 0：禁止收缩。

示例：

.item {
  flex-shrink: 0; /* 项目不会收缩 */
}

说明：

• 如果所有项目的 flex-shrink 都为 1，它们将等比例收缩。
• 如果一个项目的 flex-shrink 为 0，它将不会收缩，其他项目将收缩以填充空间。

---

3. flex-basis

作用：

• 定义 Flex 项目在分配剩余空间之前的初始大小。
• 类似于 width 或 height，但优先级更高。

取值：

• 默认值：auto（根据内容自动调整大小）。
• 长度值：如 100px、50% 等。

示例：

.item {
  flex-basis: 200px; /* 项目的初始大小为 200px */
}

说明：

• 如果 flex-basis 为 auto，项目的大小将根据内容决定。
• 如果 flex-basis 为 0，项目的大小将完全由 flex-grow 和 flex-shrink 决定。

---

4. flex（简写属性）

作用：

• flex 是 flex-grow、flex-shrink 和 flex-basis 的简写形式。
• 语法：flex: <flex-grow> <flex-shrink> <flex-basis>。

常用值：

• flex: 1：等价于 flex: 1 1 0。
  • 项目可以扩展和收缩，初始大小为 0。
• flex: auto：等价于 flex: 1 1 auto。
  • 项目可以扩展和收缩，初始大小根据内容决定。
• flex: none：等价于 flex: 0 0 auto。
  • 项目不会扩展或收缩，初始大小根据内容决定。

示例：

.item {
  flex: 1; /* 项目可以扩展和收缩，初始大小为 0 */
}

---

5. 实际应用场景

5.1 等分剩余空间

.container {
  display: flex;
}
.item {
  flex: 1; /* 所有项目等分剩余空间 */
}

5.2 固定宽度 + 自适应宽度

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px; /* 固定宽度为 200px，不扩展不收缩 */
}
.content {
  flex: 1; /* 自适应剩余空间 */
}

5.3 禁止收缩

.container {
  display: flex;
}
.item {
  flex: 1 0 auto; /* 项目可以扩展，但不会收缩 */
}

---

6. 总结

属性	作用	默认值	示例值
flex-grow	定义项目的扩展比例	0	1、2
flex-shrink	定义项目的收缩比例	1	0、1
flex-basis	定义项目的初始大小	auto	200px、50%
flex	简写形式，定义 flex-grow、flex-shrink 和 flex-basis	0 1 auto	1、1 1 auto、none

---

7. 注意事项

1. 优先级：

   • flex-basis 的优先级高于 width 或 height。
   • 如果 flex-basis 为 auto，项目的大小将根据内容决定。

2. 兼容性：

   • Flexbox 在现代浏览器中得到了广泛支持，但在旧版浏览器中可能需要使用前缀。

3. 性能：

   • 使用 flex: 1 时，浏览器会优先计算 flex-grow 和 flex-shrink，适合用于动态布局。