Flexbox讲座：flex-grow与flex-shrink的奇妙世界

欢迎来到Flexbox的世界！

大家好，欢迎来到今天的Flexbox讲座！今天我们来聊聊两个非常有趣且实用的属性：flex-grow 和 flex-shrink。这两个属性就像是Flexbox项目的“弹性肌肉”，它们决定了项目在容器中有多少空间可以伸展或收缩。

如果你已经熟悉了Flexbox的基本概念，比如display: flex、flex-direction等，那么今天的内容会让你对Flexbox的理解更上一层楼。如果你还不熟悉这些基础，建议先去了解一下，毕竟打好基础才能更好地理解进阶内容哦！

什么是flex-grow和flex-shrink？

简单来说，flex-grow和flex-shrink是控制Flexbox项目如何分配剩余空间的属性。它们的作用分别是：

• flex-grow：决定项目在有剩余空间时，是否以及如何扩展。
• flex-shrink：决定项目在空间不足时，是否以及如何缩小。

听起来有点抽象？别担心，我们通过一些具体的例子来解释这两个属性的工作原理。

---

Part 1: flex-grow —— 让项目“长高长大”

flex-grow的基本用法

flex-grow的默认值是0，这意味着项目不会自动扩展以填充剩余空间。如果我们想让某个项目占据更多的空间，就需要给它设置一个大于0的值。

示例1：简单的flex-grow

.container {
  display: flex;
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

在这个例子中，item1和item2是两个Flexbox项目。item1的flex-grow值为1，而item2的flex-grow值为2。这意味着：

• 如果容器有足够的空间，item2将比item1多占用一倍的空间。
• 如果容器没有足够的空间，flex-grow不会起作用，因为它是用来处理多余空间的。

表格解释

项目	flex-grow	占用比例
item1	1	1/3
item2	2	2/3

从表格中可以看出，item2占据了2/3的空间，而item1只占了1/3。这是因为flex-grow的值决定了每个项目在剩余空间中的比例。

flex-grow的高级用法

flex-grow不仅可以用于两个项目之间的比例分配，还可以用于多个项目。假设我们有三个项目，分别设置了不同的flex-grow值：

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 3; }

在这种情况下，item3将占据一半的空间，item2占据三分之一，item1占据六分之一。具体的比例计算方式如下：

• 总flex-grow值 = 1 + 2 + 3 = 6
• item1的比例 = 1 / 6
• item2的比例 = 2 / 6 = 1 / 3
• item3的比例 = 3 / 6 = 1 / 2

小贴士

• flex-grow的值可以是任何非负数，包括小数（如0.5）。
• 如果所有项目的flex-grow值都相同，它们将平分剩余空间。

---

Part 2: flex-shrink —— 让项目“瘦身减肥”

flex-shrink的基本用法

flex-shrink的默认值是1，这意味着当容器空间不足时，项目会自动缩小以适应容器。如果我们不想让某个项目缩小，可以将其flex-shrink值设置为0。

示例2：简单的flex-shrink

.container {
  display: flex;
  width: 300px;
}

.item1 {
  width: 200px;
  flex-shrink: 1;
}

.item2 {
  width: 200px;
  flex-shrink: 1;
}

在这个例子中，container的宽度是300px，而两个项目的初始宽度都是200px。显然，总宽度超过了容器的宽度。由于flex-shrink的值为1，两个项目都会缩小以适应容器。

表格解释

项目	初始宽度	flex-shrink	最终宽度
item1	200px	1	150px
item2	200px	1	150px

从表格中可以看出，两个项目都缩小到了150px，以适应容器的宽度。

flex-shrink的高级用法

flex-shrink的值也可以不同，这会影响各个项目在空间不足时的缩小比例。假设我们有两个项目，item1的flex-shrink值为2，item2的flex-shrink值为1：

.item1 {
  width: 200px;
  flex-shrink: 2;
}

.item2 {
  width: 200px;
  flex-shrink: 1;
}

在这种情况下，item1将比item2缩小得更多。具体来说，item1将缩小2/3，而item2将缩小1/3。

小贴士

• flex-shrink的值可以是任何非负数，包括小数（如0.5）。
• 如果所有项目的flex-shrink值都相同，它们将按相同比例缩小。

---

Part 3: flex-grow和flex-shrink的结合使用

当两者同时存在时会发生什么？

当我们同时使用flex-grow和flex-shrink时，Flexbox会根据当前的空间情况来决定是扩展还是缩小项目。让我们来看一个综合的例子：

.container {
  display: flex;
  width: 400px;
}

.item1 {
  width: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}

.item2 {
  width: 300px;
  flex-grow: 2;
  flex-shrink: 2;
}

情况1：空间充足

当容器的宽度大于所有项目的总宽度时，flex-grow会起作用，项目会扩展以填充剩余空间。假设容器宽度为400px，而两个项目的初始宽度分别为100px和300px，总宽度为400px。此时，item2将比item1多占用一倍的空间。

情况2：空间不足

当容器的宽度小于所有项目的总宽度时，flex-shrink会起作用，项目会缩小以适应容器。假设容器宽度为300px，而两个项目的初始宽度分别为100px和300px，总宽度为400px。此时，item2将比item1缩小得更多。

表格解释

项目	初始宽度	flex-grow	flex-shrink	空间充足时的宽度	空间不足时的宽度
item1	100px	1	1	133px	67px
item2	300px	2	2	267px	233px

从表格中可以看出，item2在两种情况下都比item1变化得更多，因为它有更大的flex-grow和flex-shrink值。

---

结语

通过今天的讲座，我们深入了解了flex-grow和flex-shrink这两个属性的工作原理。它们不仅可以让Flexbox项目在空间充足时灵活扩展，还能在空间不足时优雅地缩小，确保布局始终保持美观和响应式。

希望这篇文章能帮助你更好地掌握Flexbox的布局技巧。如果你有任何问题或想法，欢迎在评论区留言讨论！下次讲座再见！