深入理解 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 属性的默认值：
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
场景分析
场景一：元素使用默认值，其他元素 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 布局。
