FlexBox 将元素挤压在一起

Question

我有一个可以包含任意数量项目的 flexbox，我已将其设置为特定大小。

当我有一堆项目时，项目会垂直挤压在一起，这是我想要的行为，但如果只有少数，它们 space 均匀地填充垂直 space .我怎样才能让他们总是挤在一起？

.container {
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}

<p>The blue boxes should be flush against each other vertically</p>

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
<p>When there's a whole bunch it works correctly</p>
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

JSFiddle

Answer 1

尝试将 align-content: start; 添加到您的容器 class。

Answer 2

添加到您的容器中align-content: flex-start;

.container {
  display: block;
  height: 300px;
  width: 500px;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  border: solid;
  flex-wrap: wrap;
  overflow-y: auto;
}
.flex-1 {
  height: 100px;
  width: 100px;
  background-color: blue;
  border: solid;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>
<br>
When there's a whole bunch it works correctly
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
  <div class="flex-1"></div>
</div>

FlexBox 将元素挤压在一起

FlexBox Squeeze Elements Together

html

css

flexbox