Flexbox - повторение макета в зависимости от отображаемых элементов

Question

Я пытаюсь создать макет стиля каменной кладки, используя flexbox, я стремлюсь к чему-то, что выглядит так ..

Я могу создать макет достаточно просто, но хотелось бы, чтобы макет повторялся в зависимости от количества отображаемых элементов.

У кого-нибудь есть пример чего-то похожего или есть какие-нибудь рекомендации по его решению?

Я думал о том, чтобы сначала поработать с PHP, чтобы выяснить, сколько элементов существует, а затем сгенерировать компоновку, хотя и не уверен, что это лучший способ достичь этого.

Answer 1

Да, это может быть достигнуто flexbox. Вот как вы можете этого достичь:

.masonry {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.masonry-item {
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 8px 8px;
    background-color: #333;
    flex: auto;
}

<div class="masonry">
  <div class="masonry-item">
  <!-- this will be your inner content you dont need to specifically give this width and height -->
    <div style="width: 200px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 150px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 150px; height: 150px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 250px; height: 150px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 100px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 100px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 100px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 300px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 100px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 150px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 150px; height: 100px;"></div>
  </div>
  <div class="masonry-item">
    <div style="width: 100px; height: 100px;"></div>
  </div>
</div>

Независимо от того, сколько контента у вас есть, это поместит их в каменную кладку.

Answer 2

Вы можете сделать это с помощью Flexbox, вам просто нужно использовать flex-wrap: wrap и установить ширину первых двух элементов от 5 до 50%, а других от 3 до 33.33%. Также вам необходимо включить поля в ширину элементов.

* {
  box-sizing: border-box;
}
.layout {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 100px;
  margin: 5px;
  border: 1px solid black;
}
.item:nth-child(5n + 1),
.item:nth-child(5n + 2) {
  height: 150px;
  background: blue;
  flex: 0 0 calc(50% - 10px);
}
.item:nth-child(5n + 3),
.item:nth-child(5n + 4),
.item:nth-child(5n + 5) {
  background: blue;
  flex: 0 0 calc(33.33% - 10px);
}

<div class="layout">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Вы также можете сделать это с помощью Grid-Layout, используя grid-template-columns: repeat(6, 1fr), а затем сделав первые два элемента span 3 и другие 3 span 2. Это означает, что первые 2 предмета будут занимать 3 или 6 единиц, а остальные 3 - 2 единицы по 6 *. 1016 *

* {
  box-sizing: border-box;
}
.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px 100px;
}
.item {
  border: 1px solid black;
}
.item:nth-child(5n + 1),
.item:nth-child(5n + 2) {
  grid-column: span 3;
}
.item:nth-child(5n + 3),
.item:nth-child(5n + 4),
.item:nth-child(5n + 5) {
  grid-column: span 2;
}

<div class="layout">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>