Помогите решить в CSS

Question

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

.container {
  margin: 50px auto;
  width: 1240px;
  border: 1px solid #000;
  height: 700px;
}

.cards {
  display: flex;
  flex-flow: wrap;
  padding: 10px;
  justify-content: space-between;
}

.card {
  border: 1px solid #000;
  border-radius: 5px;
  width: 400px;
  height: 300px;
  margin-bottom: 5px;
}

<div class="container">
  <div class="blocks">
    <div class="cards">
      <div class="card" style="height: 150px">
        
      </div>
      <div class="card" style="height: 250px">
        
      </div>
      <div class="card" style="height: 200px">
        
      </div>
      <div class="card" style="height: 380px">
        
      </div>
      <div class="card" style="height: 400px">
        
      </div>
      <div class="card" style="height: 120px">
        
      </div>
    </div>
  </div>
</div>

Хочу чтобы получилось так как на картинке но так не получается. Что бы при добавлении блока любой высоты было как но фотографии

Answer 1

Все flex-ы, grid-ы, да вообще разметка, очень любят явное указание размеров. Поэтому, желательно, если не указывать напрямую, то стараться по возможности "прокидывать" размеры до каждого элемента.

У Вас же, кроме вложенности, ещё и flex, а размер указан только для основного контейнера. Потому всё рассыпается.

Для вашей раскладки, также необходимо задать ориентацию column во flex-flow.

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

.container {
  /* Здесь высота контейнера фиксированая */
  height: 700px;
  width: 1240px;
  margin: 50px auto;
  box-shadow: inset 0 0 0 2px red;
}

.blocks {
  /* Прокидываем высоту */
  height: 100%;
  box-shadow: inset 0 0 0 2px yellow;
}

.cards {
  display: flex;
  /* Здесь два значения: ориентация и перенос */
  flex-flow: column wrap;
  /* Прижимаем к верху */
  justify-content: flex-start;
  /* Ещё прокидываем высоту */
  height: 100%;
  padding: 10px;
  box-shadow: inset 0 0 0 2px green;
}

.card {
  width: 400px;
  margin-bottom: 5px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px blue;
}

<div class="container">
  <div class="blocks">
    <div class="cards">
      <div class="card" style="height: 150px"> </div>
      <div class="card" style="height: 250px"> </div>
      <div class="card" style="height: 200px"> </div>
      <div class="card" style="height: 380px"> </div>
      <div class="card" style="height: 400px"> </div>
      <div class="card" style="height: 120px"> </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Помогите решить в CSS

Ответы (1 шт):