Question

我有一个紧随宽度的flexbox：calc(100% / 3); CSS。如果超过6个div，则非常适合屏幕显示。但是，我有一个过滤系统，因此潜在地用户可以过滤并仅显示2个div。然后，这显示了很多空白，是否有人对我如何解决这个问题有任何想法？

在滤镜上，我尝试更改宽度，但这超出了我们追求的3x2设计。请在http://www.project-progress.co.uk/intersystems/category/finance/#blogs-filter

查看设计

.tiles .tile {
  flex-basis: calc(100% / 2);
  width: calc(100% / 3);
  position: relative;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.tiles .tile:nth-child(1n) {
  flex-basis: calc(50% / 1);
}

.tiles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  overflow: auto;
  position: relative;
  overflow-x: scroll;
}

<div class="tiles" id="blog-posts">
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
</div>

Flexbox过滤器问题

0 个答案: