CSS Flex izkārtojuma flīžu problēmas

Pirmā flīžu izkārtojuma problēma kopumā ir uzreiz acīmredzama - ir ļoti neērti, ka vecākam elementam ir skaidri jānorāda augstums. Galu galā mums var būt tāda situācija, ka bloku skaits mainīsies dinamiski un to skaits būs reizēm mazāks, reizēm lielāks par 9.

Bet otrā problēma radīsies, ja bloku skaits būs tāds, ka pēdējā rindā būs niecīgs bloku daudzums. Šajā gadījumā pēdējā rinda izskatīsies šausmīgi:

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

Izrādās, ka pat horizontāli vērtība space-between mūsu gadījumā darbojas slikti.

Rezumējot: ja jūsu pēcteču skaits vienmēr ir nemainīgs un tie normāli ietilpst vecākā elementā, tad flīžu izkārtojums ar space-between ir pietiekami ērts risinājums. Pretējā gadījumā būs jāizdomā kaut kas cits.

Ir doti 12 elementi. Izveidojiet no tiem flīžu izkārtojumu ar 4 elementiem rindā, kur katra elementa platums ir 100px un attālums starp tiem 20px.

Ir doti 12 elementi. Izveidojiet no tiem flīžu izkārtojumu ar 3 elementiem rindā, kur katra elementa platums ir 150px un attālums starp tiem 10px.