深入理解 Flexbox 布局中 flex: 1 1 0 与未设置 flex-basis 的差异
在 Flexbox 布局中，flex: 1 1 0 和未设置 flex-basis 会产生截然不同的布局效果，这源于它们对 flex-basis 属性的不同处理方式。 让我们深入探讨这种差异。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。flex: 1 1 0 分别将这三个属性设置为 1、1 和 0。这意味着：
-
flex-grow: 1: 元素将按比例分配剩余空间。 -
flex-shrink: 1: 元素将按比例收缩以适应容器空间。 -
flex-basis: 0: 元素的初始大小为 0。 这是关键所在。
而当未设置 flex-basis 时，其默认值为 auto。auto 的含义是元素的初始大小将根据其内容计算得出。
让我们通过一个例子来说明：假设一个容器包含一个宽度为 200px 的图片和一段文字，我们希望文字占据剩余空间。
场景一：flex: 1 1 0
如果文字元素的 flex 属性设置为 1 1 0，由于 flex-basis: 0，文字元素的初始大小为 0。因此，它不会占用任何空间，所有剩余空间都将分配给文字元素。图片将保持其 200px 的宽度。
场景二：未设置 flex-basis (默认 auto)
如果文字元素未设置 flex-basis，则 flex-basis 为 auto。此时，文字元素的初始大小将根据其内容计算。如果文字内容较多，其初始宽度可能超过剩余空间，导致图片宽度被压缩以适应容器。
代码示例 (场景一):
<div class="container"> <div class="image"></div> <div class="text" style="flex: 1 1 0;"></div> </div>
代码示例 (场景二):
<div class="container"> <div class="image"></div> <div class="text"></div> </div>
(CSS 代码与原文相同，此处省略)
总结：flex-basis: 0 强制元素不占用任何初始空间，而 flex-basis: auto 则让元素根据内容大小决定初始空间。选择哪种方式取决于你希望元素在 Flexbox 布局中如何分配空间和响应容器大小的变化。 flex: 1 1 0 适用于希望元素完全填充剩余空间的场景，而未设置 flex-basis 则更适合需要根据内容自适应大小的场景。
