Flex布局中`flex: 1; width: 0;`组合的妙用：为什么第二个子元素设置`width: 0;`后，第一个子元素就能正常显示？

flex布局技巧：巧用flex: 1; width: 0;解决子元素挤压问题

flex布局在网页布局中应用广泛，但有时会遇到子元素相互挤压的问题。本文将深入探讨flex: 1; width: 0;组合的妙用，以及如何避免Flex容器中子元素被挤压的情况。

以下代码片段展示了一个常见问题：一个Flex容器包含两个子元素，第一个子元素设置了固定宽度，第二个子元素占据剩余空间，导致第一个子元素几乎不可见。

<div style="width: 350px; display: flex;">     <div style="width: 50px; height: 50px; background-color: blanchedalmond;"></div>     <div style="flex: 1; width: 0; white-space: nowrap;">         <div>css3 flex布局，文字超出.css3 flex布局，文字超出.css3 flex布局，文字超出.</div>     </div> </div>

为什么为第二个子元素添加width: 0;后，第一个子元素就能正常显示？关键在于Flex布局的空间分配机制。

当display: flex时，子元素成为Flex项目。Flex布局会根据项目属性分配空间。默认情况下，项目min-width和min-height为auto。如果仅为一个项目设置width，而其他项目宽度未指定，则设置了width的项目可能会被压缩。这就是上述代码中第一个元素被挤压的原因。

然而，当第二个项目设置width: 0;并同时设置flex: 1;后，情况改变了。Flex布局计算所有项目的宽度。width: auto的含义取决于元素类型：块级元素表示充分利用可用空间，内联元素表示收缩至合适大小。

width: 0;和flex: 1;的组合，让第二个项目不占用任何空间，flex: 1则分配剩余空间(350px – 50px = 300px)给它。这样，第一个元素就不会被挤压了。

虽然min-width或width: 0;都能解决问题，但更推荐使用flex-shrink: 0;阻止第一个元素被压缩，这更符合Flex布局的设计理念。