Dlaždice pomocou flexboxov v CSS

Poďme sa teraz naučiť vytvárať dlaždice pomocou flexboxov. Najprv usporiadajme flex bloky do niekoľkých radov, po tri bloky v rade.

Aby sme to dosiahli, nastavme rodičovskému kontajneru šírku na 300px a flex-wrap na hodnotu wrap, a potomkom šírku 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;
}

Teraz pridajme medzery medzi našimi blokmi v horizontálnom smere. Preto zvýšime šírku rodičovského kontajnera, aby sme vytvorili priestor pre odsadenia.

Keďže máme tri bloky v rade, znamená to, že medzi nimi sú dve medzery. Povedzme, že chceme, aby každá medzera mala šírku 10px. To znamená, že šírku rodičovského kontajnera je potrebné zvýšiť o 20px, t.j. nastaviť ju nie na 300px, ale na 320px.

Nastavme teraz rodičovskému kontajneru justify-content na hodnotu space-between a dosiahnime požadovanú medzeru medzi blokmi:

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

Pridajme teraz rovnakú medzeru medzi blokmi aj vo vertikálnom smere. Na to môžeme nastaviť vlastnosť align-content na hodnotu space-between.

Na to je však potrebné nastaviť výšku rodičovskému kontajneru, inak align-content nebude fungovať. Nastavme výšku na 320px. V takom prípade sa nám zmestia práve tri rady blokov s výškou 100px plus dve medzery medzi radmi s výškou 10px.

Spustime kó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;
}

Všetko funguje výborne, ale existujú určité problémy, ktoré preskúmame v nasledujúcej lekcii.