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

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

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

`<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>` `.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` и получим желаемое расстояние между блоками:

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

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

`<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>` `.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; }`

:

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

← →
↑