Как и относительно чего считаются отступы, которые возникают при использовании flex-wrap: wrap?

Question

Вот что я имею в виду:

Вот мой код:

* {
  margin: 0;
  padding: 0;
}

.wrapper-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 3px solid black;
  height: 500px;
}

.block {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  margin: 5px;
}

<div class="wrapper-block">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Как, например, мне уменьшить этот отступ?

Answer 1

Как уже было сказано в комментах, нужно убрать высоту у flex-контейнера. Либо явно указать выравнивание рядов по поперечной оси свойством align-content :

* {
  margin: 0;
  padding: 0;
}

.wrapper-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  border: 3px solid black;
  height: 500px;
}

.block {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  margin: 5px;
}

<div class="wrapper-block">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

БЛОГ НА HUSL

Как и относительно чего считаются отступы, которые возникают при использовании flex-wrap: wrap?

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