Flexbox'i plokiprobleemid CSS-is

Plokkide esimene probleem on üldiselt kohe ilmne - see on väga ebamugav, et vanemapeale tuleb selgesõnaliselt määrata kõrgus. Lõppude lõpuks võib meil juhtuda nii, et plokkide arv muutub dünaamiliselt ja nende arv on vahel väiksem, vahel suurem kui 9.

Kuid teine probleem tekib siis, kui plokkide arv on selline, et viimases reas on ebapiisav arv plokke. Sel juhul viimane rida näeb välja kole:

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

Selgub, et isegi horisontaalselt väärtus space-between ei tööta meie juhul hästi.

Kokkuvõtteks: kui teie alamplokkide arv on alati konstantne ja mahub normaalselt vanemasse, siis on space-between plokid üsna mugav asi. Vastasel juhul tuleb mõelda millegi muule peale.

Antud on 12 elementi. Tehke neist plokid 4 elemendi kaupa reas, iga elemendi laiusega 100px ja nendevahelise kaugusega 20px.

Antud on 12 elementi. Tehke neist plokid 3 elemendi kaupa reas, iga elemendi laiusega 150px ja nendevahelise kaugusega 10px.