Problem med CSS-flexbox-layout

Det första problemet med layouten är ganska uppenbart direkt - det är väldigt obekvämt att föräldern måste anges en explicit höjd. Trots allt kan vi mycket väl ha en situation där antalet block ändras dynamiskt och deras antal kommer att vara ibland mindre, ibland mer än 9.

Och det andra problemet uppstår om antalet block är sådant att den sista raden har otillräckligt med block. I det här fallet kommer den sista raden att se hemsk ut:

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

Det visar sig att även horisontellt fungerar värdet space-between dåligt i vårt fall.

Sammanfattning: om antalet dina underordnade element alltid är konstant och får plats i föräldern normalt, så är layout på space-between en ganska bekväm sak. Annars måste man komma på något annat.

Det finns 12 element. Gör en layout med 4 element per rad med bredden på varje element 100px och avståndet mellan dem 20px.

Det finns 12 element. Gör en layout med 3 element per rad med bredden på varje element 150px och avståndet mellan dem 10px.