Проблеми с плочки върху флекс в CSS

Първият проблем с плочките като цяло е очевиден веднага - много неудобно е, че на родителя трябва изрично да се задава височина. В края на краищата, напълно възможно е броят на блоковете да се променя динамично и техният брой да бъде понякога по-малък, понякога по-голям от 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.