CSS-flexilaatioiden ongelmat

Ensimmäinen ongelma laatoituksessa on melko ilmeinen heti alusta alkaen - se on erittäin hankalaa, että vanhemmalle elementille on pakko asettaa korkeus eksplisiittisesti. Onhan täysin mahdollista, että lohkojen määrä muuttuu dynaamisesti ja niiden määrä voi olla välillä vähemmän, välillä enemmän kuin 9.

Toinen ongelma ilmaantuu, jos lohkojen määrä on sellainen, että viimeisellä rivillä on riittämätön määrä lohkoja. Tässä tapauksessa viimeinen rivi näyttää kamalalta:

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

Käy ilmi, että jopa vaakatasolla arvo space-between toimii huonosti meidän tapauksessamme.

Yhteenvetona: jos lastesi määrä on aina vakio ja ne mahtuvat normaalisti vanhempaan, niin space-between -laatoitus on melko kätevä asia. Muussa tapauksessa on keksittävä jotain muuta.

Annettu 12 elementtiä. Tee niistä laatoitus, jossa on 4 elementtiä per rivi, joiden leveys on 100px ja väli niiden välillä on 20px.

Annettu 12 elementtiä. Tee niistä laatoitus, jossa on 3 elementtiä per rivi, joiden leveys on 150px ja väli niiden välillä on 10px.