深入理解 Flex 布局中 flex: 1 1 0 与未设置 flex-basis 的区别

Flex 布局的 flex 属性是一个简写属性，包含 flex-grow、flex-shrink 和 flex-basis 三个子属性。本文将详细分析设置 flex: 1 1 0 与未设置 flex-basis (即使用默认值) 的差异，并解释为何 flex-basis: 0 和 flex-basis: auto 会产生不同的布局结果。

问题概述

在实际应用中，经常会遇到这样的情况：使用 flex: 1 1 0 时，元素宽度保持不变；而使用 flex: 1 1 auto 时，元素宽度会被调整。这种差异的原因是什么呢？

关键知识点

理解 flex-basis 至关重要：

• flex-basis 类似于 width（flex-direction: row）或 height（flex-direction: column），定义元素的初始大小。
• 当 flex-basis 和 width 或 height 同时存在时，width 或 height 将被忽略。
• Flex 属性的默认值：

  <code>  flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;</code>

场景分析

场景一：元素使用默认值，其他元素 flex-grow: 1

如果一个元素使用默认的 flex-basis: auto，其初始大小将是其内容的自然大小（例如，图片的实际宽度）。如果其他元素设置了 flex-grow: 1，且所有元素的总宽度超过容器宽度，则所有元素都会根据 flex-shrink 比例进行收缩。

场景二：元素使用默认值，其他元素 flex-basis: 0 和 flex-grow: 1

在这种情况下，使用默认 flex-basis: auto 的元素的初始大小仍然是其内容的自然大小。而 flex-basis: 0 的元素初始大小为 0。如果所有元素总宽度小于容器宽度，则 flex-grow: 1 的元素会按比例分配剩余空间。

结论

flex: 1 1 0 和未设置 flex-basis (即 flex-basis: auto) 的关键区别在于元素的初始大小。flex-basis: 0 将元素的初始大小设置为 0，使其完全由 flex-grow 和 flex-shrink 控制。而 flex-basis: auto 使用元素内容的自然大小作为初始大小，这会影响最终的布局结果。 因此，根据实际需求选择合适的 flex-basis 值至关重要，才能灵活掌控 Flex 布局。 理解这些差异，有助于在实际项目中更有效地运用 Flex 布局。