CSSda plitochka uchun vertikal joy tashlash

Keling, endi vertikal joy tashlashni ham qo'shamiz. Buning uchun barcha voris elementlarga margin-bottom xususiyatini 10px qiymatida belgilaymiz:

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

Ko'rib turganimizdek, hamma narsa yaxshi ishlaydi, faqat oxirgi qator ota-ona elementdan joy olgani bundan mustasno. Ko'pincha bu muhim emas.

Qatorda ikkita elementli plitochka yarating, elementlar orasidagi masofa 20px bo'lsin.

Qatorda uchta elementli plitochka yaratin, elementlar orasidagi masofa 20px bo'lsin.

Qatorda to'rtta elementli plitochka yarating, elementlar orasidagi masofa 20px bo'lsin.