# Проблемы плиточки на флексах в 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; }`

:

Все работает замечательно, но есть некоторые проблемы.

## Проблемы плитки

Первая проблема в общем-то очевидна сразу - очень не удобно то, что родителю приходится явно задавать высоту. Ведь у нас вполне может быть такое, что количество блоков будет меняться динамически и их количество будет то меньше, то больше, чем `9`.

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

`<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>` `.parent { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 320px; border: 1px solid red; } .child { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid green; }`

:

Получается, что даже по горизонтали значение `space-between` работает плохо в нашем случае.

Резюмируем: если количество ваших потомков всегда постоянно и нормально помещается в родителя, то плиточка на `space-between` достаточно удобная вещь. В противном случае придется придумывать что-то еще.

## Практические задачи

Даны `12` элементов. Сделайте из них плиточку по `4` элемента в ряд с шириной каждого элемента в `100px` и расстоянием между ними в `20px`.

Даны `12` элементов. Сделайте из них плиточку по `3` элемента в ряд с шириной каждого элемента в `150px` и расстоянием между ними в `10px`.

←→
↑