See the JS Fiddle

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>

item类的静态宽度为：33％。

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

由于

Answer 1

您需要将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 2

您最好的选择是使用Masonry，但如果您坚持使用仅限CSS的解决方案，那么您应该使用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>

Answer 3

添加一些flex属性修复它。我补充说：

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

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

See the JS Fiddle

CSS Tricks guide to flex-box

Answer 4

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

使不同高度的div填充新行的垂直空间

4 个答案:

See the JS Fiddle