Težave s ploščicami na fleksih v CSS

Prva težava ploščic je na splošno takoj očitna - zelo neprijetno je, da mora starš izrecno določiti višino. Navsezadnje lahko imamo povsem primer, ko se bo število blokov spreminjalo dinamično in njihovo število bo včasih manjše, včasih večje od 9.

In druga težava se bo pojavila, če je število blokov takšno, da bo v zadnji vrsti premalo blokov. V tem primeru bo zadnja vrsta izgledala grozno:

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

Izkazalo se je, da celo vodoravno vrednost space-between v našem primeru slabo deluje.

Povzemamo: če je število vaših potomcev vedno konstantno in se normalno prilega staršu, potem so ploščice na space-between precej priročna stvar. V nasprotnem primeru boste morali izmisliti še kaj drugega.

Podanih je 12 elementov. Naredite iz njih ploščico po 4 elemente v vrsto s širino vsakega elementa 100px in razdaljo med njimi 20px.

Podanih je 12 elementov. Naredite iz njih ploščico po 3 elemente v vrsto s širino vsakega elementa 150px in razdaljo med njimi 10px.