CSS Flexbox csempe elrendezés

Most pedig tanuljuk meg, hogyan készítsünk csempe elrendezést flexboxokkal. Először helyezzük el a flex elemeket több sorba, három blokk minden sorban.

Ehhez a flex szülő elem szélességét állítsuk 300px-re és a flex-wrap értékét wrap-re, a gyermek elemek szélességét pedig 100px-ra:

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

Most tegyünk vízszintes távolságot a blokkok közé. Ehhez növeljük meg a szülő elem szélességét, hogy helyet adjunk a margóknak.

Mivel három blokk van egy sorban, az azt jelenti, hogy köztük két rés van. Tegyük fel, hogy minden rés 10px széles legyen. Ez azt jelenti, hogy a szülő szélességét 20px-vel kell növelnünk, azaz ne 300px legyen, hanem 320px.

Most állítsuk a blokkok szülőjének justify-content értékét space-between-re, és megkapjuk a kívánt távolságot a blokkok között:

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

Most adjunk hozzá ugyanekkora távolságot a blokkok között függőlegesen is. Ehhez állítsuk a align-content tulajdonságot space-between értékre.

Ehhez azonban meg kell adnunk magasságot a szülőnek, különben a align-content nem fog működni. Állítsuk a magasságot 320px-re. Ebben az esetben pont elférnek három sor blokk, mind 100px magas, plusz két 10px-es rés a sorok között.

Futtassuk le:

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

Minden remekül működik, de van néhány probléma, amelyet a következő leckében megvizsgálunk.