CSS `Flexbox` 深度：`flex-basis`, `flex-grow`, `flex-shrink` 权重与缩放行为

大家好，我是你们的Flexbox老司机！今天咱们来聊聊Flexbox里那三个磨人的小妖精：flex-basis、flex-grow 和 flex-shrink。 它们就像乐队里的三个乐器，各司其职，配合默契，才能奏出完美的布局乐章。 很多人对这三个属性感到头疼，觉得它们一会儿变大，一会儿变小，让人摸不着头脑。但别怕，今天我就用最通俗易懂的方式，把它们扒个精光，让你彻底搞懂它们的运作机制。

开场白：Flexbox 的舞台

首先，咱们得明确 Flexbox 的舞台是什么。Flexbox 主要用于解决容器内部元素的排列和对齐问题。容器通过设置 display: flex 或 display: inline-flex 来开启 Flexbox 模式。一旦容器开启了 Flexbox，它的子元素（直接子元素）就变成了 Flex 项目（Flex Items）。

第一乐器：flex-basis – 尺寸的奠基人

flex-basis 就像乐队里的贝斯手，它负责奠定整个曲子的基础节奏。它定义了在分配剩余空间之前，Flex 项目的初始大小。 换句话说，它告诉浏览器，这个项目在伸缩之前，应该有多宽（对于 flex-direction: row）或多高（对于 flex-direction: column）。

• 取值：

  • auto (默认值)：项目的大小由其内容决定。这就像一个默认的尺寸，根据你的内容自适应。
  • <length>：指定一个固定的长度值，例如 100px、2em、50%。
  • content：基于项目的内容自动计算大小。浏览器会根据项目的内容来确定其初始大小。 (实验性属性，支持度可能不佳)
  • 0：项目的初始大小为 0。 这意味着项目在没有 flex-grow 的情况下不会占据任何空间。

• 代码示例：

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.item {
  padding: 10px;
  border: 1px solid red;
}

.item1 {
  flex-basis: 100px;
}

.item2 {
  flex-basis: 200px;
}

.item3 {
  flex-basis: auto; /* 默认值，大小由内容决定 */
}

在这个例子中，item1 的初始大小是 100px，item2 的初始大小是 200px，而 item3 的大小由其内容决定。 剩下的空间将由 flex-grow 和 flex-shrink 来分配。

• auto 的玄机：

当 flex-basis 设置为 auto 时，项目的初始大小通常由其 width 或 height 属性决定。 如果没有设置 width 或 height，则大小由内容决定。

第二乐器：flex-grow – 扩张的野心家

flex-grow 就像乐队里的吉他手，它负责在空间充足的时候，让曲子更加奔放。 它定义了当容器有多余空间时，项目应该如何放大。

• 取值： 一个无单位的数字。 这个数字表示项目在分配剩余空间时所占的比例。

• 代码示例：

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.item {
  padding: 10px;
  border: 1px solid red;
  flex-basis: auto; /* 初始大小由内容决定 */
}

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

.item3 {
  flex-grow: 1;
}

在这个例子中，假设所有项目的内容总宽度小于 500px。那么剩余的空间将按照 1:2:1 的比例分配给 item1、item2 和 item3。 也就是说，item2 将获得的空间是 item1 和 item3 的两倍。

• 计算公式：

  假设容器的剩余空间为 R，所有项目的 flex-grow 总和为 S，那么每个项目获得的额外空间为：

  项目获得的额外空间 = (项目 flex-grow 值 / S) * R

  例如，如果 R = 200px，S = 1 + 2 + 1 = 4，那么：

  • item1 获得的额外空间 = (1 / 4) * 200px = 50px
  • item2 获得的额外空间 = (2 / 4) * 200px = 100px
  • item3 获得的额外空间 = (1 / 4) * 200px = 50px

• flex-grow: 0 的含义：

  flex-grow: 0 表示项目不会放大，即使容器有多余空间。

第三乐器：flex-shrink – 收缩的谦逊者

flex-shrink 就像乐队里的鼓手，它负责在空间不足的时候，让曲子更加紧凑。 它定义了当容器空间不足时，项目应该如何缩小。

• 取值： 一个无单位的数字。 这个数字表示项目在缩小空间时所承担的比例。

• 代码示例：

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.container {
  display: flex;
  width: 300px;
  border: 1px solid black;
}

.item {
  padding: 10px;
  border: 1px solid red;
  flex-basis: 150px;
}

.item1 {
  flex-shrink: 1;
}

.item2 {
  flex-shrink: 2;
}

.item3 {
  flex-shrink: 1;
}

在这个例子中，所有项目的 flex-basis 都是 150px，总宽度为 450px，大于容器的宽度 300px。 因此，需要缩小 150px 的空间。 缩小空间将按照 1:2:1 的比例分配给 item1、item2 和 item3。 也就是说，item2 将承担的缩小空间是 item1 和 item3 的两倍。

• 计算公式：

  这部分的计算稍微复杂一些，需要考虑每个项目的 flex-basis。

  1. 计算每个项目的 加权缩小值：
     加权缩小值 = 项目 flex-shrink 值 * 项目 flex-basis 值

  2. 计算 加权缩小值总和：
     加权缩小值总和 = 所有项目的加权缩小值之和

  3. 计算每个项目 需要缩小的空间：
     项目需要缩小的空间 = (项目加权缩小值 / 加权缩小值总和) * 需要缩小的总空间

  例如，如果容器需要缩小的总空间为 150px，item1 的 flex-basis 为 150px，flex-shrink 为 1；item2 的 flex-basis 为 150px，flex-shrink 为 2；item3 的 flex-basis 为 150px，flex-shrink 为 1。

  1. 加权缩小值：

     • item1 的加权缩小值 = 1 * 150px = 150
     • item2 的加权缩小值 = 2 * 150px = 300
     • item3 的加权缩小值 = 1 * 150px = 150

  2. 加权缩小值总和：

     • 加权缩小值总和 = 150 + 300 + 150 = 600

  3. 需要缩小的空间：

     • item1 需要缩小的空间 = (150 / 600) * 150px = 37.5px
     • item2 需要缩小的空间 = (300 / 600) * 150px = 75px
     • item3 需要缩小的空间 = (150 / 600) * 150px = 37.5px

• flex-shrink: 0 的含义：

  flex-shrink: 0 表示项目不会缩小，即使容器空间不足。 这可能会导致项目溢出容器。

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; (项目不会伸缩，大小由内容决定)

表格总结：

属性	描述	默认值	作用
flex-basis	定义了在分配剩余空间之前，项目的初始大小。	auto	决定了项目在伸缩之前的尺寸基准。
flex-grow	定义了当容器有多余空间时，项目应该如何放大。	0	决定了项目在有剩余空间时如何扩张，数值越大，扩张的比例越大。
flex-shrink	定义了当容器空间不足时，项目应该如何缩小。	1	决定了项目在空间不足时如何收缩，数值越大，收缩的比例越大。
flex	flex-grow、flex-shrink 和 flex-basis 的简写形式。		简化了对这三个属性的设置，常用值包括 flex: 1;、flex: auto; 和 flex: none;。

实战演练：一个简单的导航栏

咱们用 Flexbox 来创建一个简单的导航栏：

<nav class="navbar">
  <a href="#" class="logo">Logo</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px 20px;
  background-color: #f0f0f0;
}

.nav-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links li:first-child {
  margin-left: 0;
}

在这个例子中，justify-content: space-between 让 Logo 和导航链接分别位于导航栏的两端。 align-items: center 让它们在垂直方向上居中对齐。

高级技巧：min-width 和 max-width 的影响

min-width 和 max-width 属性可以限制 Flex 项目的最小和最大宽度。 这会影响 flex-grow 和 flex-shrink 的行为。

• 如果项目设置了 min-width，那么即使 flex-shrink 大于 0，项目也不会缩小到小于 min-width 的值。

• 如果项目设置了 max-width，那么即使 flex-grow 大于 0，项目也不会放大到大于 max-width 的值。

常见误区：

• 误区一：flex-basis 必须设置。 实际上，flex-basis 有默认值 auto，这意味着项目的大小由其内容决定。
• 误区二：flex-grow 和 flex-shrink 必须同时设置。 并非如此，你可以只设置 flex-grow，让项目只放大不缩小，或者只设置 flex-shrink，让项目只缩小不放大。
• 误区三：flex-grow 和 flex-shrink 的值必须是整数。 虽然通常使用整数，但它们也可以是小数。 例如，flex-grow: 0.5 也是有效的。

总结陈词：

flex-basis、flex-grow 和 flex-shrink 是 Flexbox 中最重要的三个属性。 掌握它们，你就能轻松驾驭各种复杂的布局。 记住，flex-basis 负责奠定尺寸基础，flex-grow 负责放大，flex-shrink 负责缩小。 它们相互配合，共同构建出灵活而强大的布局。

希望今天的讲解能帮助你彻底理解这三个属性。 记住，多练习，多实践，你也能成为 Flexbox 大师！ 下课！