CSSda Flekslarda Plitkach Muammolari

Plitkaning birinchi muammosi umuman olganda darhol aniq - ota-og'iga aniq balandlik berish zarurati juda noqulay. Axir, bizda bloklar soni dynamik o'zgarishi va ularning soni 9 dan kam yoki ko'p bo'lishi mumkin bo'lgan holat bo'lishi mumkin.

Ikkinchi muammosi esa, agar bloklar soni shunday bo'lsa, oxirgi qatorda etishmayotgan bloklar bo'lsa paydo bo'ladi. Bu holda oxirgi qator juda yomon ko'rinadi:

<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-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ma'lum bo'ladiki, hatto gorizontal yo'nalishda ham space-between qiymati bizning holatda yomon ishlaydi.

Xulosa qilamiz: agar sizning vorislaringiz soni doimiy bo'lsa va ota-ona elementiga normal sig'sa, space-between asosidagi plitka juda qulay narsa. Aks holda boshqa narsalarni o'ylab topish kerak bo'ladi.

12 ta element berilgan. Ulardan qatorda 4 ta elementdan bo'lgan plitka yarating, har bir elementning kengligi 100px va ular orasidagi masofa 20px bo'lsin.

12 ta element berilgan. Ulardan qatorda 3 ta elementdan bo'lgan plitka yarating, har bir elementning kengligi 150px va ular orasidagi masofa 10px bo'lsin.