CSSda Flekslar bilan Plitochka

Keling, endi fleksbokslar yordamida plitochka qilishni o'rganamiz. Boshlanish uchun fleks-bloklarni bir necha qatorga joylashtiramiz, har bir qatorda uchta blok bo'lsin.

Buning uchun flekslarning ota-onasiga 300px kenglik belgilaymiz va flex-wrap xususiyatini wrap qiymatiga o'rnatamiz, vorislarga esa 100px kenglik 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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Keling, endi bloklarimiz orasiga gorizontal joy tashlaymiz. Buning uchun chetlar uchun qo'shimcha joy ochish maqsadida ota-onaning kengligini oshiramiz.

Bizda har bir qatorda uchta blok bo'lgani uchun, ular orasida ikkita bo'shliq paydo bo'ladi. Aytaylik, har bir bo'shliq 10px kenglikka ega bo'lishini istaymiz. Demak, ota-onaning kengligi 20px ga oshirilishi kerak, ya'ni 300px emas, balki 320px bo'lishi kerak.

Keling, endi bloklarning ota-onasiga justify-content xususiyatini space-between qiymatiga o'rnatamiz va bloklar orasida istalgan masofani olamiz:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Keling, endi bloklar orasiga shunday masofani vertikal ravishda ham qo'shaylik. Buning uchun align-content xususiyatini space-between qiymatiga o'rnatish mumkin.

Biroq, buning uchun ota-onaga balandlik belgilash kerak, aks holda align-content ishlamaydi. Keling, balandlikni 320px ga o'rnatamiz. Bu holda 100px balandlikdagi uch qator blok va ular orasidagi 10px li ikkita bo'shliq joylashadi.

Keling, ishga tushiramiz:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Hammasi ajoyib ishlayapti, lekin keyingi darsda ko'rib chiqadigan ba'zi muammolar mavjud.