flex: 1 1 0 和未设置 flex-basis 有何区别？-html教程-PHP中文网

flex: 1 1 0 和未设置 flex-basis 有何区别？

聖光之護

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

原创

865人浏览过

flex: 1 1 0 和未设置 flex-basis 有何区别？

深入理解Flex属性：flex: 1 1 0 与 flex-basis 的差异

Flexbox布局中，flex属性至关重要，它简化了Flex项目的伸缩性和初始尺寸的定义。然而，flex: 1 1 0与未设置flex-basis的区别，以及它与flex: 1 1 auto的差异，常常让开发者感到困惑。

flex属性实际上是flex-grow、flex-shrink和flex-basis三个属性的简写形式。flex: 1 1 0分别对应：flex-grow: 1，flex-shrink: 1，flex-basis: 0。

flex-basis属性决定了Flex项目在主轴方向上的初始大小。当flex-basis设置为0时，是否等同于未设置它呢？让我们通过示例分析。

假设一个Flex容器包含一个图片和一段文本。我们将.text的flex属性设置为1 1 0，观察对图片宽度的影响。

<div class="container">
    <div class="image"></div>
    <div class="text">
        <p>这是一段较长的文本，用于测试flex-basis: 0的效果。</p>
    </div>
</div>
<style>
    .container {
        display: flex;
    }
    .image {
        width: 200px;
        height: 200px;
        background-color: #f0f0f0;
        margin-right: 20px;
    }
    .text {
        flex: 1 1 0;
    }
</style>

登录后复制

这里，.text的flex-basis显式设置为0，这意味着其在主轴方向上的初始大小为0。但由于flex-grow为1，它会尽可能扩展以填充剩余空间。图片宽度保持200像素，因为它未设置flex-grow，不会扩展或收缩。

现在，将.text的flex属性改为1 1 auto：