Для получения полного доступа
зарегистрируйтесь

CSS: Flexbox. Не меньше 2х дочерних блоков в последней строке


Разметка HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
$columns: 4; // количество колонок

.parent {
  display: flex;
  flex-flow: row wrap;
}

.child {
  flex: 1 0 100%/$columns;
  background: #222;
  min-height: 15vh;
  box-sizing: border-box;
  border: 5px solid #fff;
}

.child:nth-last-child(2):nth-child(#{$columns}n) {
  min-width: 50%;
}

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация