flex 属性的三个组成部分

flex 属性是以下三个子属性的简写： flex: <flex-grow> <flex-shrink> <flex-basis>;

flex-basis: 尺寸基准

flex-basis 定义了在分配剩余空间 (free space) 之前，一个 flex item 在主轴上的初始尺寸或“假设尺寸” (hypothetical size)。

• 默认值: auto。
  • 如果元素显式设置了 width 或 height（取决于主轴方向），flex-basis 的值就等于该尺寸。
  • 如果未设置 width/height，则其尺寸等于其内容的内在尺寸 (intrinsic size)。
• 优先级: 当 flex-basis 被设置为一个具体值（如 100px 或 0%）时，其优先级高于 width 或 height 属性。

flex-grow: 增长因子

flex-grow 定义了当 flex 容器在主轴上存在剩余空间时，flex item 应如何“瓜分”这些空间。

• 默认值: 0，表示即使有剩余空间，元素也不会放大。
• 分配机制: 它是一个比例值。
  • 如果所有 flex item 的 flex-grow 值总和大于等于 1，它们会按各自 flex-grow 值的比例来分配所有剩余空间。例如，A、B 两个 item 的 flex-grow 分别为 2 和 1（总和为 3），则 A 会获得 2/3 的剩余空间，B 会获得 1/3。
  • 如果所有 flex item 的 flex-grow 值总和小于 1，它们将不会完全占据所有剩余空间。它们只会占据“总和百分比”的剩余空间。例如，A、B 的 flex-grow 分别为 0.2 和 0.3（总和为 0.5），它们将总共占据 50% 的剩余空间，剩余 50% 的空间会留白。在这 50% 的已分配空间中，A 会获得 2/5，B 会获得 3/5。

flex-shrink: 收缩因子

flex-shrink 定义了当 flex 容器在主轴上的空间不足时，flex item 应如何“分摊”这个超出的空间。

• 默认值: 1，表示默认情况下，所有 item 会等比例收缩。
• 分配机制: 其计算为 (flex-shrink × flex-basis) 的比例值。例如，两个元素分别为 flex-shrink: 1, flex-basis: 200px 和 flex-shrink: 2, flex-basis: 100px，收缩比例为 200:200（即 1:1），而非简单的 1:2。

Flex 布局算法与 flex: 1

浏览器确定 flex item 最终尺寸的算法流程如下：

<div class="flex h-24 border">
  <div class="flex-1 bg-blue-200">Item 1</div>
  <div class="flex-1 bg-green-200">Item 2</div>
  <div class="flex-1 bg-red-200">Item 3</div>
</div>

flex-wrap 的影响与 Grid 的对比

Flexbox 的尺寸分配算法是逐行或逐列独立计算的。

flex: 1 在换行布局中的局限性

当父容器设置了 flex-wrap: wrap 时，flex: 1 的等分效果仅在同一行或同一列内有效。不同行/列的“剩余空间”是独立计算的，如果每行的 item 数量不同，它们的最终尺寸也会不同。

<div style="display: flex; flex-wrap: wrap; width: 220px; border: 2px solid black; box-sizing: border-box;">
  <!-- 第一行：3个元素，每个最小内容宽度50px，加上padding和border，总最小宽度72px -->
  <div style="flex: 1; min-width: 50px; background: lightblue; padding: 10px; border: 1px solid darkblue; text-align: center;">1</div>
  <div style="flex: 1; min-width: 50px; background: lightblue; padding: 10px; border: 1px solid darkblue; text-align: center;">2</div>
  <div style="flex: 1; min-width: 50px; background: lightblue; padding: 10px; border: 1px solid darkblue; text-align: center;">3</div>
  
  <!-- 第二行：2个元素，每个最小宽度50px，但剩余空间被等分，所以每个元素实际宽度更大 -->
  <div style="flex: 1; min-width: 50px; background: lightgreen; padding: 10px; border: 1px solid darkgreen; text-align: center;">4</div>
  <div style="flex: 1; min-width: 50px; background: lightgreen; padding: 10px; border: 1px solid darkgreen; text-align: center;">5</div>
</div>