Flislegging med flexbox i CSS

La oss nå lære å lage flislegging med flexbox. Først skal vi plassere flex-blokkene i flere rader, med tre blokker per rad.

For å gjøre dette, setter vi bredden på forelderen til 300px og flex-wrap til verdien wrap, og bredden på barneelementene til 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;
}

La oss nå lage avstand mellom blokkene våre horisontalt. For å gjøre dette, øker vi bredden på forelderen for å gi ekstra plass for marger.

Siden vi har tre blokker per rad, betyr det at det er to mellomrom mellom dem. La oss si at vi vil at hvert mellomrom skal ha en bredde på 10px. Da må bredden på forelderen økes med 20px, det vil si at den ikke blir 300px, men 320px.

La oss nå sette justify-content på forelderen til barneelementene til verdien space-between og få ønsket avstand mellom blokkene:

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

La oss nå legge til samme avstand mellom blokkene vertikalt. For å gjøre dette kan vi sette egenskapen align-content til verdien space-between.

For å gjøre dette må vi imidlertid sette en høyde på forelderen, ellers vil ikke align-content fungere. La oss sette høyden til 320px. I dette tilfellet får vi plass til tre rader med blokker på 100px høyde pluss to marger mellom radene på 10px.

La oss kjøre koden:

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

Alt fungerer utmerket, men det er noen problemer som vi skal se på i neste leksjon.