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

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

花韻仙語

发布： 2025-03-26 08:52:01

原创

400人浏览过

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布局的设计理念。

以上就是Flex布局中`flex: 1; width: 0;`组合的妙用：为什么第二个子元素设置`width: 0;`后，第一个子元素就能正常显示？的详细内容，更多请关注php中文网其它相关文章！