Как прижать перескакивающие блоки к низу на флексе?

Question

Как сделать так, чтобы блоки которые съехали прижались к низу, а верхние остались сверху? Нужно что-то вроде "align-items: space-between", но такого значения нет, есть идеи?

.parent {
  border: 1px solid #000;
  height: 220px;
  width: 320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<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>

Answer 1

Используйте align-content: space-between;. Он работает также на поперечной оси, как и justify-content на главной оси.

.parent {
  border: 1px solid #000;
  height: 220px;
  width: 320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.child {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<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>

БЛОГ НА HUSL

Как прижать перескакивающие блоки к низу на флексе?

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