Vertikaalsed taanded plokikujulise paigutuse jaoks CSS-is

Lisame nüüd ka vertikaalsed taanded. Selleks määrame kõigile järglastele margin-bottom väärtuseks 10px:

<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-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Nagu näeme, töötab kõik hästi, välja arvatud see, et viimane rida on taandunud vanemaelemendist. Enamasti pole see kriitiline.

Tehke plokikujuline paigutus kahe elemendiga reas elementide vahelise kaugusega 20px.

Tehke plokikujuline paigutus kolme elemendiga reas elementide vahelise kaugusega 20px.

Tehke plokikujuline paigutus nelja elemendiga reas elementide vahelise kaugusega 20px.