Laatoitus fleboxeilla CSS:ssä

Opitaan nyt tekemään laatoitus flexboxeilla. Aluksi järjestetään flex-lohkot useaan riviin, kolme lohkoa per rivi.

Tätä varten asetetaan flexien vanhemmalle leveys 300px ja flex-wrap arvoon wrap, ja lapsille leveys 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;
}

Tehdään nyt välimatka lohkojemme väliin vaakasuunnassa. Tätä varten suurennetaan vanhemman leveyttä antaaksemme ylimääräistä tilaa marginaaleille.

Koska meillä on kolme lohkoa rivissä, tulee niiden väliin kaksi rakoa. Oletetaan että haluamme jokaisen raon olevan 10px leveä. Siitä seuraa, että vanhemman leveyttä täytyy suurentaa 20px, eli tehdä se ei 300px, vaan 320px.

Asetetaan nyt lohkojen vanhemmalle justify-content arvoksi space-between ja saadaan toivottu välimatka lohkojen välille:

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

Lisätään nyt vastaava välimatka lohkojen väliin myös pystysuunnassa. Tätä varten voidaan asettaa ominaisuus align-content arvoon space-between.

Tätä varten on kuitenkin asetettava korkeus vanhemmalle, muita align-content ei toimi. Asetetaan korkeus 320px. Tässä tapauksessa meillä mahtuu tasan kolme riviä lohkoja, joiden korkeus on 100px plus kaksi rakoa rivien välillä, kumpikin 10px.

Kokeillaan:

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

Kaikki toimii loistavasti, mutta on joitain ongelmia, joita tarkastelemme seuraavassa oppitunnissa.