Problemi pločica na fleks boksovima u CSS

Prvi problem pločice je, uopšte, očigledan odmah - vrlo je nezgodno to što roditelju moramo eksplicitno zadati visinu. Uostalom, vrlo je moguće da će se broj blokova dinamički menjati i da će njihov broj ponekad biti manji, a ponekad veći od 9.

A drugi problem će se pojaviti ako je broj blokova takav da u poslednjem redu bude nedovoljan broj blokova. U tom slučaju poslednji red će izgledati užasno:

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

Ispada da čak i horizontalno, vrednost space-between ne radi dobro u našem slučaju.

Da rezimiramo: ako je broj vaših potomaka uvek konstantan i normalno se uklapa u roditelja, onda je pločica sa space-between prilično zgodna stvar. U suprotnom, moraćemo da smislimo nešto drugo.

Date su 12 elemenata. Napravite od njih pločicu od 4 elementa u redu sa širinom svakog elementa od 100px i razmakom između njih od 20px.

Date su 12 elemenata. Napravite od njih pločicu od 3 elementa u redu sa širinom svakog elementa od 150px i razmakom između njih od 10px.