Flexbox: realizzare un layout responsive con CSS semplici e puliti

Flexbox: realizzare un layout responsive con CSS semplici e puliti

Nicola Di Venere Di Nicola Di Venere


Flexbox CSS Flexbox CSS

Flexbox è una proprietà CSS oggi giorno diffusissima, utilizzata per posizionare gli elementi della nostra pagina web in maniera pratica e veloce all’interno di un container (contenitore) genitore.

Questa proprietà ha sostituito del tutto grid, utilizzata negli anni passati per creare griglie con gli elementi.

La peculiarità di flexbox, oltre alla semplicità di utilizzo è la sua compatibilità con i browser più moderni, come ad esempio: Google Chrome, Mozilla Firefox, Edge, etc.

NB: per controllare la compatibilità delle proprietà CSS puoi utilizzare un tool all’indirizzo:  https://caniuse.com/.

Questo strumento ti mostrerà, per ogni proprietà da te ricercata, una tabella con tutte le versioni dei Browser per le quali la proprietà è compatibile.

/Users/nicoladivenere/Desktop/Schermata 2021-06-08 alle 11.49.35.png

Adesso ti mostrerò come utilizzare flexbox, attraverso degli esempi pratici.

../Schermata%202021-06-08%20alle%2012.23.52.png

Nell’esempio sopra riportato avremo gli elementi disposti uno sotto l’altro. 

../Schermata%202021-06-08%20alle%2012.48.04.png

Per disporre gli elementi sulla stessa riga (uno accanto all’altro) all’interno del container, ti basterà applicare a quest’ultimo la proprietà display con valore flex (display: flex).

../Schermata%202021-06-08%20alle%2012.55.12.png

Un’altra importante proprietà è flex-direction, che può avere due valori: row o column. Row è il valore di default, invece column ci permette di disporre gli elementi in verticale su una colonna.

../Schermata%202021-06-08%20alle%2015.00.48.png../Schermata%202021-06-08%20alle%2015.02.04.png

Gli elementi disposti sulla stessa riga (il contenitore deve possedere come regole CSS: display: flex; flex-direction: row) possono essere posizionati in maniera differente.

Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: justify-content.

Quest’ultima può avere come valore: center, space-between, space-around, etc.

Utilizziamo il valore:

  • center: per allineare al centro gli elementi all’interno del contenitore;
  • space-between: per assegnare spazio tra gli elementi e 
  • space-around: per assegnare lo stesso spazio prima e dopo ciascun elemento.

justify-content: center

../Schermata%202021-06-08%20alle%2015.40.06.png../Schermata%202021-06-08%20alle%2015.38.27.png

justify-content: space-between

../Schermata%202021-06-08%20alle%2015.48.32.png../Schermata%202021-06-08%20alle%2015.50.39.png

justify-content: space-around (con tre elementi per comprendere al meglio il funzionamento di space-around)

../Schermata%202021-06-08%20alle%2016.01.39.png../Schermata%202021-06-08%20alle%2016.02.02.png

A differenza di justify-content che dispone gli elementi lungo l’asse x, align-items invece dispone gli elementi lungo l’asse y. In questo specifico caso utilizziamo center come valore.

../Schermata%202021-06-08%20alle%2016.19.26.png../Schermata%202021-06-08%20alle%2016.20.06.png

Nel caso in cui gli elementi sono disposti sulla stessa colonna, il contenitore deve possedere come regole CSS: display: flex; flex-direction: column. Per modificare la posizione degli elementi sull’asse orizzontale (x) utilizziamo la proprietà: align-items; invece per modificare la posizione degli elementi sull’asse verticale (y) utilizziamo la proprietà: justify-content. NB: esattamente il contrario di quanto fatto precedentemente.

Flexbox presenta molte altre caratteristiche e proprietà che puoi approfondire in maniera più dettagliata sul sito web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

 

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo