这些弹性物品为什么以这种方式间隔？

Question

我做了一个简单的柔性箱jsfiddle为了玩弄所有的柔性箱值，但偶然发现了一些我无法解释的我的.item div由于某种原因而间隔出来，并且.grid会自动伸展到全高，我并不完全确定为什么发生这种情况

HTML

<div class="container"> 
    <div class="grid"> 
    <div class="item red">a</div> 
    <div class="item yellow">b</div> 
    <div class="item blue">c</div> 
    </div> 
</div> 

CSS

.container { 
    width: 320px; 
    height: 480px; 
    background: black; 
    padding:15px; 
    margin: 20px auto; 
    display: flex; 
} 

.grid { 
    background: white; 
    display: flex; 
    width: 100%; 
    justify-content: flex-start; 
    align-items: flex-start; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.item { 
    width: 100%; 
    flex-grow: 0; 
    flex-basis: 100%; 
    align-self: auto; 
    align-items: flex-start; 
    padding: 10px 0; 
} 

.red { background: red; } 
.yellow { background: yellow; } 
.blue { background: blue; } 

Answer 1

的align-items: flex-start（上.grid组）导致这种类型的行为。正如MDN docs

的CSS对齐项指定的属性定义了浏览器之间，并在其容器的横绕轴弯曲的物品如何分配空间。

如果您禁用它，默认情况下该值将被设置为stretch（每个Flex项目将被拉伸以填充容器）。