Мушкилоти тахтачаҳо (плиточка) дар флексҳо дар CSS

Мушкили якуми тахтачаҳо (плиточка) дар умум барои ҳама равшан аст - он чизе, ки ба волидайн бояд ба таври расмӣ баландиии аниқ таъин кард, хеле номувофиқ аст. Дар ҳақиқат, дар мо метавонад чунин бошад, ки шумораи блокҳо тағирёбанда бошад ва шумораи онҳо то камтар, то зиёдтар аз 9 шавад.

Аммо мушкили дуюм падид хоҳад омад, агар шумораи блокҳо чунин бошад, ки дар сафи охирин шумораи кофии блокҳо набошад. Дар ин сурат сафи охирин бад менамояд:

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

Маълум мешавад, ки ҳатто ба тарафи уфуқӣ қимати space-between дар ҳолати мо бад кор мекунад.

Хулоса: агар шумораи фарзандҳои шумо ҳамеша доимӣ бошад ва ба таври нормалӣ ба волидайн меғунҷад, пас тахтачаҳо (плиточка) бо space-between чизе, ки хеле мувофиқ аст, мебошад. Дар акси ҳол бояд чизе дигар ихтироъ кард.

12 элемент дода шудаанд. Аз онҳо тахтачаҳо (плиточка) тартиб диҳед, ки дар як саф 4 элемент бошад, васеии ҳар як элемент 100px ва масофа байни онҳо 20px бошад.

12 элемент дода шудаанд. Аз онҳо тахтачаҳо (плиточка) тартиб диҳед, ки дар як саф 3 элемент бошад, васеии ҳар як элемент 150px ва масофа байни онҳо 10px бошад.