弯曲：0 0 100% 和弯曲：1 1 100% 之间的差异

Question

我已经测试了以下内容，但我想问一下，以防万一有差异。

我有一个容器，它是一个flex容器。这些项目具有 的属性flex: 1 1 100%。只是出于好奇的目的，我也进行了测试flex: 0 0 100%，但我没有注意到任何差异（也许有）。

我的问题是：如果flex-basis是 100%，那么其他 2 个属性值是什么还重要吗？

Answer 1

如果 flex-basis 是 100%，那么其他 2 个属性值是多少还重要吗？

是的。当弹性盒中的项目的宽度达到或超过弹性盒本身的宽度时，flex-shrink就会发挥作用（flex-grow仅适用于项目小于弹性盒的宽度时）：

例如，在下面的情况下，第二个项目的 flex-shrink 设置为 0，因此第二个项目不会收缩，并且将占据 100% 的视口。

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}

<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

如果这两个项目都设置为flex-shrink:1，它们都将占据视口的一半（它们同等地缩小到 50%）：

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 1 100%;background-color:goldenrod}

<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

如果两者都设置为flex-shrink:0，则两者都不会缩小，并且都将占据视口宽度的 100%，从而将 Flexbox 的宽度增加到视口宽度的两倍：

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 0 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}

<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>