Griglia con Flex in CSS

Impariamo ora a creare una griglia utilizzando i flexbox. Per iniziare, disponiamo i blocchi flex in diverse righe, con tre blocchi per riga.

Per fare ciò, impostiamo la larghezza del genitore dei flex a 300px e flex-wrap sul valore wrap, e ai figli una larghezza di 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;
}

Aggiungiamo ora una spaziatura tra i nostri blocchi in orizzontale. Per fare questo, aumentiamo la larghezza del genitore per dare spazio aggiuntivo per i margini.

Poiché abbiamo tre blocchi per riga, risultano due spazi tra di loro. Supponiamo di volere che ogni spazio abbia una larghezza di 10px. Risulterà che la larghezza del genitore deve essere aumentata di 20px, cioè fatta non 300px, ma 320px.

Impostiamo ora per il genitore dei blocchi justify-content sul valore space-between e otterremo la spaziatura desiderata tra i blocchi:

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

Aggiungiamo ora la stessa spaziatura tra i blocchi anche in verticale. Per fare ciò possiamo impostare la proprietà align-content sul valore space-between.

Per questo, tuttavia, è necessario impostare l'altezza del genitore, altrimenti align-content non funzionerà. Impostiamo l'altezza a 320px. In questo caso avremo esattamente spazio per tre righe di blocchi da 100px di altezza più due spazi tra le righe da 10px.

Eseguiamo:

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

Tutto funziona alla perfezione, ma ci sono alcuni problemi, che esamineremo nella prossima lezione.