CSS-da Avtomatik Kenglikdagi Bloklar bilan Plitochka

Oldingi darsda bizning plitochkamizda elementlarning kengligi va ularning oraliqlari yig'indisi ota-ona elementining kengligini berishi kerak edi. Bu biroz universal emas. Keling, elementlar ota-ona elementining kengligiga avtomatik moslashadigan qilaylik.

Faraz qilaylik, bizda quyidagi ota-ona elementi bor:

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

Faraz qilaylik, ushbu plitochka elementlari qatorda 4 ta blokdan turadi:

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

Bloklarimizning kengligini shunday belgilaylikki, ularning har biri ota-ona elementining chorak qismini egallasin. Buning uchun ularning o'lchamini 25% qilib belgilaymiz:

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

Bloklarga foizlarda kenglik belgilang, shunda plitochkada qatorda uchta blok bo'lsin.

Bloklarga foizlarda kenglik belgilang, shunda plitochkada qatorda ikkita blok bo'lsin.

Bloklarga foizlarda kenglik belgilang, shunda plitochkada qatorda bitta blok bo'lsin.