使不同高度的div在新行上垂直填充space

Question

我正在尝试制作一个看起来应该像这样的网格

但它呈现为这样

这是我的 HTML 代码

<div style="display: flex; flex-wrap: wrap">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

项目 class 的静态宽度：33%。

我知道在 JS 中做这样的事情是很有可能的。但我正在寻找一个纯粹的 CSS 解决方案。

谢谢

Answer 1

添加更多的弹性属性修复了它。我补充说：

flex-direction: column;
align-content: flex-start;

可能不完全符合您的需要，但您应该能够根据自己的需要进行调整

See the JS Fiddle

CSS Tricks guide to flex-box

Answer 2

<div style="display: flex; width: 100%;">
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
  </div>
</div>

Answer 3

您需要向包装器元素添加 flex-direction 和 align-content 属性。和一些固定的高度.... 检查 DEMO

CSS

.wrapper {
  height: 1400px;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}

.item {
  width:33%;
}

HTML

<div class="wrapper">
    <div class="item" style="height: 300px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

Answer 4

您最好的选择是使用 Masonry but if you insist on CSS only solution then you should use columns 这里是Demo

.wrapper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
  column-count: 3;
 -webkit-column-gap: 0; /* Chrome, Safari, Opera */
 -moz-column-gap: 0; /* Firefox */
  column-gap: 0;
  width: 100vw;
}

.wrapper div {
  display: inline-block;
  width: 100%;
  vertical-align: top;

}

<div class="wrapper">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

使不同高度的div在新行上垂直填充space

make divs of different heights fill vertical space on new line

css

flexbox

See the JS Fiddle