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