Flex 布局空间分配策略剖析

Flex 布局作为现代 Web 设计中的重要布局方式，因其强大的灵活性而备受青睐。它可以轻松实现多栏等高布局、水平垂直居中对齐等效果，让页面布局更加简洁美观。

要掌握 Flex 布局，了解 flex-grow、flex-shrink、flex-basis 三个属性及其作用至关重要。

Flex-grow：控制项目增长比例

flex-grow 属性指定项目在分配剩余空间时的增长比例。它的默认值为 0，表示项目不会增长。当 flex-grow 大于 0 时，项目将根据其 flex-grow 值与其他项目竞争剩余空间。

Flex-shrink：控制项目收缩比例

flex-shrink 属性指定项目在分配剩余空间不足时的收缩比例。它的默认值为 1，表示项目会根据需要收缩。当 flex-shrink 小于 1 时，项目将优先级收缩，以确保其他项目能够获得足够的空间。

Flex-basis：定义项目的初始尺寸

flex-basis 属性定义项目的初始尺寸，即在分配剩余空间之前，项目占据的空间。它的默认值为 auto，表示项目占据其内容的实际大小。当 flex-basis 为固定值时，项目将首先占据其 flex-basis 指定的大小，然后再根据 flex-grow 和 flex-shrink 属性分配剩余空间。

掌握了这三个属性，我们就可以轻松实现各种复杂的布局。

空间分配策略

Flex 布局在分配空间时，遵循以下策略：

1. 首先，根据 flex-basis 为每个项目分配初始尺寸。
2. 然后，将剩余空间分配给 flex-grow 大于 0 的项目。分配比例根据 flex-grow 值计算。
3. 如果剩余空间不足，则从 flex-shrink 大于 0 的项目中收回空间，以确保所有项目都能获得足够的空间。

示例

以下示例演示了 flex-grow、flex-shrink 和 flex-basis 属性在空间分配中的作用：

.container {
  display: flex;
}

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

.item2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 100px;
}

在这个示例中，.item1 和 .item2 都是 Flex 布局的子元素。.item1 的 flex-grow 和 flex-shrink 都为 1，flex-basis 为 100px；.item2 的 flex-grow 为 2，flex-shrink 为 1，flex-basis 为 100px。

当容器宽度为 400px 时，.item1 和 .item2 的宽度分别为 150px 和 250px。因为 .item2 的 flex-grow 大于 .item1，所以它获得了更多的剩余空间。

如果容器宽度减小到 300px，则 .item1 和 .item2 的宽度分别为 75px 和 225px。因为 .item1 和 .item2 的 flex-shrink 都为 1，所以它们都收缩了相同的比例。

总结

Flex 布局的 flex-grow、flex-shrink 和 flex-basis 属性提供了强大的空间分配能力，可以轻松实现各种复杂的布局。掌握这三个属性，您就能游刃有余地使用 Flex 布局，构建出美观实用的页面布局。