Plokikujundus flexbox'ide abil CSS-is

Õpime nüüd, kuidas luua plokikujundust flexbox'ide abil. Alustame sellega, et paigutame flex-elemendid mitmele reale, kolm elementi reas.

Selleks määrame flex-konteinerile laiuseks 300px ja flex-wrap väärtuseks wrap, ning lastelementidele laiuseks 100px:

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

Lisame nüüd elementide vahele horisontaalsed tühimikud. Selleks suurendame konteineri laiust, et luua ruumi vahede jaoks.

Kuna meil on kolm elementi reas, on elementide vahel kaks tühimikku. Oletame, et soovime, et iga tühimiku laius oleks 10px. Sel juhul tuleb konteineri laiust suurendada 20px võrra, st mitte 300px, vaid 320px.

Määrame nüüd elementide konteinerile justify-content väärtuseks space-between ja saame soovitud vahemaa elementide vahel:

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

Lisame nüüd samasugused tühimikud elementide vahel ka vertikaalselt. Selleks saame määrata omaduse align-content väärtuseks space-between.

Selleks tuleb siiski määrata konteinerile kõrgus, vastasel juhul align-content ei tööta. Määrame kõrguseks 320px. Sel juhul mahub täpselt kolm rida elemente, igaüks kõrgusega 100px, pluss kaks 10px vahet ridade vahel.

Käivitame nüüd:

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

Kõik töötab suurepäraselt, kuid on mõned probleemid, mida käsitleme järgmises õppetükis.