CSS-de plitochka üçin düşewünden aralyklar

Indi bolsa, düşewünden aralyklary hem goşalyň. Bunun üçin ähli çagalara margin-bottom bahasyny 10px bellenjek:

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

Görşümiz ýaly, iň soňky setir eňesinden aralap duran bolsa-da, ýagdaý gowy işleýär. Köpçilik ýagdaýda bu möhüm däl.

Elementleriň arasyndaky uzaklygy 20px bolan, bir setirde iki elementli plitochka ýasaň.

Elementleriň arasyndaky uzaklygy 20px bolan, bir setirde üç elementli plitochka ýasaň.

Elementleriň arasyndaky uzaklygy 20px bolan, bir setirde dört elementli plitochka ýasaň.