CSS fleks pločice

Hajde sada da naučimo kako da pravimo pločice koristeći fleksboksove. Za početak, postavićemo fleks blokove u nekoliko redova, po tri bloka u redu.

Za ovo, roditeljskom elementu fleksova postavimo širinu na 300px i flex-wrap na vrednost wrap, a potomcima širinu od 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;
}

Sada hajde da napravimo razmak između naših blokova horizontalno. Za ovo, povećaćemo širinu roditelja kako bismo dali dodatni prostor za margine.

Pošto imamo tri bloka u redu, to znači da između njih postoje dva razmaka. Pretpostavimo da želimo da svaki razmak ima širinu od 10px. To znači da širinu roditelja treba povećati za 20px, odnosno napraviti ne 300px, već 320px.

Sada hajde da roditeljskom elementu blokova dodelimo justify-content vrednost space-between i da dobijemo željeni razmak između blokova:

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

Sada hajde da dodamo isti takav razmak između blokova i vertikalno. Za ovo možemo postaviti svojstvo align-content na vrednost space-between.

Za ovo, međutim, potrebno je postaviti visinu roditelju, inače align-content neće raditi. Hajde da postavimo visinu na 320px. U ovom slučaju, tačno će stati tri reda blokova od po 100px visine plus dve margine između redova od 10px.

Hajde da pokrenemo:

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

Sve radi odlično, ali postoje određeni problemi koje ćemo razmotriti u sledećoj lekciji.