flex：0 0 100％和flex：1 1 100％之间的差异

Question

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

我有一个flex容器。这些项目的属性为flex: 1 1 100%。出于好奇的目的，我还测试了flex: 0 0 100%，但没有发现任何区别（也许有区别）。

我的问题是：如果flex-basis是100％，那么其他两个属性值到底有什么关系呢？

Answer 1

  

如果flex-basis是100％，那么其他2个也不管   属性值是？

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

例如，在以下情况下，第二个项目的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>