弹性布局列高度

Question

​

.flex-body {
  display: flex;
  flex-wrap: wrap;
}
.flex-body div{
  width: 50%;
  align-items: flex-start;
}

<div class="flex-body">
  <div style="background: #0980cc; height:100px;"></div>
  <div style="background: #09cc69;height: 200px;"></div>
  <div style="background: #cc092f;height:170px;"></div>
  <div style="background: #0980cc; height:130px;"></div>
  <div style="background: #09cc69;height: 100px;"></div>
  <div style="background: yellow;height: 100px;"></div>
</div>

​

我想填充flex容器中行之间的空白，每个元素都有不同的高度，并且我希望元素直接堆叠在彼此的顶部。

检查此fiddle

Answer 1

空格之所以存在，是因为您设置了每个Flex子项的高度。只要不这样做，它们就会自然地填满空间。

​

.flex-body {
  display: flex;
  flex-wrap: wrap;
  width : 100vw;
  height: 80vh;
}

.flex-body div{
  flex-basis : 50%;
  align-items: flex-start;
  outline: blue dashed 2px;
}

<div class="flex-body">
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: #cc092f;"></div>
  <div style="background: #0980cc;"></div>
  <div style="background: #09cc69;"></div>
  <div style="background: yellow;"></div>
</div>

​