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

Question

我制作了一个简单的flexbox jsfiddle要玩弄所有的flexbox值，但偶然发现了一些我无法解释的.item div由于某种原因而被隔开的问题{{3}} 1}}自动伸展到全高，我不完全确定为什么会发生这种情况？

HTML

.grid

CSS

<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>

Answer 1

align-items: flex-start（在.grid上设置）会导致此类行为。正如MDN docs

中所述

  

CSS align-items属性定义浏览器如何沿着容器的横轴在flex项之间和之间分配空间。

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