Плиточка на флексах в CSS

Давайте сейчас научимся делать плиточку на флексбоксах. Для начала расположим флекс-блоки в несколько рядов, по три блок в ряд.

Для этого родителю флексов установим ширину в 300px и flex-wrap в значении wrap, а потомкам ширину в 100px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

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

Так как у нас три блока в ряд, получается что между ними по два промежутка. Пусть мы хотим, чтобы каждый промежуток имел ширину 10px. Получится, что ширину родителя нужно увеличить на 20px, то есть сделать не 300px, а 320px.

Давайте теперь родителю блоков зададим justify-content в значение space-between и получим желаемое расстояние между блоками:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Давайте теперь добавим такое же расстояние между блоками и по вертикали. Для этого можно задать свойство align-content в значении space-between.

Для этого, однако, нужно задать высоту родителю, иначе align-content не будет работать. Давайте установим высоту в 320px. В этом случае у нас как раз поместятся три ряда блоков по 100px высотой плюс два отступа между рядами в 10px.

Давайте запустим:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  height: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Все работает замечательно, но есть некоторые проблемы, которые мы рассмотрим в следующем уроке.