Fliseeffekt med flexbox i CSS

Lad os nu lære at lave en fliseeffekt med flexbox. Til at starte med vil vi arrangere flex-blokkene i flere rækker, med tre blokke i hver række.

For at gøre dette sætter vi forælderens bredde til 300px og flex-wrap til værdien wrap, og børnenes bredde 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;
}

Lad os nu tilføje afstand mellem vores blokke vandret. For at gøre dette øger vi forælderens bredde for at give ekstra plads til margener.

Da vi har tre blokke i hver række, betyder det at der er to mellemrum mellem dem. Lad os sige at vi ønsker, at hvert mellemrum skal have en bredde på 10px. Det vil sige, at forælderens bredde skal øges med 20px, dvs. gøres til 320px i stedet for 300px.

Lad os nu give blokkenes forælder justify-content med værdien space-between og opnå den ønskede afstand mellem 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;
}

Lad os nu tilføje den samme afstand mellem blokkene lodret. For at gøre dette kan man sætte egenskaben align-content til værdien space-between.

For at gøre dette er det dog nødvendigt at sætte en højde på forælderen, ellers vil align-content ikke fungere. Lad os sætte højden til 320px. I dette tilfælde har vi netop plads til tre rækker af blokke med 100px i højde plus to margener mellem rækkerne på 10px.

Lad os kø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 fremragende, men der er nogle problemer, som vi vil se nærmere på i næste lektion.