Probleme met teëls op buigbokse in CSS

Die eerste probleem met teëls is in die algemeen dadelik voor die hand liggend - dit is baie ongerieflik dat die ouer uitdruklik die hoogte moet spesifiseer. Ons kan immers maklik 'n situasie hê waar die aantal blokke dinamies sal verander en hul aantal sal soms minder wees, soms meer as 9.

Maar die tweede probleem sal ontstaan as die aantal blokke so is dat daar in die laaste ry 'n onvoldoende aantal blokke sal wees. In hierdie geval sal die laaste ry aaklig lyk:

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

Dit blyk dat selfs horisontaal die waarde space-between nie goed werk in ons geval nie.

Samevatting: as die aantal van jou nakomelinge altyd konstant is en normaal in die ouer pas, dan is teëls op space-between 'n redelik gerieflike ding. Andersins sal ons iets anders moet bedink.

Gegee 12 elemente. Maak daar teëls van met 4 elemente per ry met 'n breedte van elke element van 100px en 'n afstand tussen hulle van 20px.

Gegee 12 elemente. Maak daar teëls van met 3 elemente per ry met 'n breedte van elke element van 150px en 'n afstand tussen hulle van 10px.