這些彈性物品爲什麼以這種方式間隔？

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項目將被拉伸以填充容器）。