CSS-de awtomatik ini bilen plitochka

Öňki sapakda biz ýasan plitochkada elementleriň ini we olaryň aralyklarynyň jemi ata elementiniň inine deň gelýärdi. Bu birneme ýönekeý däl. Indi elementleriň ata elementiniň inine awtomatik uýgunlaşmagyny üpjün edeliň.

Bizde şeýle ata element bar diýeliň:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Bu plitochkanyň elementleriniň her hatarynda 4 blog bolsun:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Indi bloklarymyzyň ini şeýle belläýeliň, her biri ata elementiniň dörtden bir bölegini eýelesin. Bunuň üçin olaryň ölçegini 25% edeliň:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Bloklaryň ini göterimlerde şeýle belläň, plitochkada her hatarda üç blok bolsun.

Bloklaryň ini göterimlerde şeýle belläň, plitochkada her hatarda iki blok bolsun.

Bloklaryň ini göterimlerde şeýle belläň, plitochkada her hatarda bir blok bolsun.