Flex布局中`flex: 1; width: 0;`是如何避免子元素互相挤压的？-html教程-PHP中文网

Flex布局中`flex: 1; width: 0;`是如何避免子元素互相挤压的？

心靈之曲

发布： 2025-03-17 08:40:27

原创

300人浏览过

flex 布局中 flex: 1; width: 0; 的巧妙应用：避免子元素互相挤压

在使用 Flex 布局时，子元素间的布局冲突时有发生。本文将分析一个常见场景：为什么在 Flex 容器中，设置子元素 flex: 1; width: 0; 能有效防止它挤压其他子元素？

让我们来看一个例子：

<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>

登录后复制

在这个例子中，第一个 div 宽度固定为 50px，第二个 div 包含大量文本，并设置了 flex: 1; width: 0;。如果没有 width: 0;，第二个 div 将占据所有剩余空间，导致第一个 div 无法正常显示。这是因为 Flex 布局默认情况下，子元素的 min-width 和 min-height 属性为 auto。当子元素设置了 width 属性后，Flex 布局会根据其内容和 width 属性计算大小。如果其他子元素未设置 width，其 width 为 auto，在 Flex 布局中 auto 会根据剩余空间进行伸缩，从而挤压其他元素。

当我们为第二个 div 设置 width: 0; 后，情况改变了。width: 0; 表示元素宽度为零，但 flex: 1; 使其占据剩余可用空间。flex: 1; 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;。flex-grow: 1 允许元素根据剩余空间伸展，而 width: 0; 确保其初始宽度为零，不会影响其他元素布局。因此，第二个 div 会根据内容伸展，但不会挤压第一个 div。

总而言之，width: 0; 与 flex: 1; 的组合巧妙地利用了 Flex 布局特性，使第二个 div 占据剩余空间，同时不影响第一个 div 的显示。这是一种解决 Flex 布局中子元素冲突的方法，但更推荐直接使用 flex-shrink: 0; 来防止第一个元素被压缩。

Flex布局中`flex: 1; width: 0;`是如何避免子元素互相挤压的？