Проблема с фильтром Flexbox - PullRequest
0 голосов
/ 25 июня 2019

У меня есть flexbox, следующий за шириной: calc(100% / 3); css.Это хорошо вписывается в экран, если есть более 6 дел.Тем не менее, у меня есть система фильтрации, поэтому потенциально пользователь может фильтровать и показывать только 2 деления.Затем это показывает много пустого пространства, у кого-нибудь есть идеи, как я могу обойти это?

На фильтре я пытался изменить ширину, но это выходит за рамки дизайна 3x2, который нам нужен.Пожалуйста, смотрите дизайн здесь http://www.project -progress.co.uk / intersystems / категория / финансы / # блоги-фильтр

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...