A CSS flexbox-os mozaikproblémái

Az első probléma a mozaikkal kapcsolatban alapvetően azonnal nyilvánvaló - nagyon kényelmetlen, hogy a szülőnek explicit meg kell adnia a magasságot. Hiszen teljesen lehetséges, hogy a blokkok száma dinamikusan változik, és számuk időnként kevesebb, időnként több lesz, mint 9.

A második probléma akkor merül fel, ha a blokkok száma olyan, hogy az utolsó sorban nem lesz elegendő blokk. Ebben az esetben az utolsó sor rettenetesen fog kinézni:

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

Kiderül, hogy még vízszintesen is a space-between érték rosszul működik a mi esetünkben.

Összegezzük: ha az utódok száma mindig állandó és rendesen elfér a szülőben, akkor a space-between mozaik meglehetősen kényelmes dolog. Ellenkező esetben valami mást kell kitalálni.

Adott 12 elem. Készítsen belőlük mozaikot, 4 elem per sor, minden elem szélessége 100px és a köztük lévő távolság 20px.

Adott 12 elem. Készítsen belőlük mozaikot, 3 elem per sor, minden elem szélessége 150px és a köztük lévő távolság 10px.