Impara CSS Flexbox in 5 minuti - Un tutorial per principianti

Una rapida introduzione al popolare modulo di layout

In questo post imparerai le basi di CSS Flexbox, che è diventata un'abilità indispensabile per sviluppatori e designer web negli ultimi due anni.

Useremo una barra di navigazione come esempio, poiché questo è un caso d'uso molto tipico per Flexbox. Questo ti introdurrà alle sue proprietà più utilizzate del modulo, tralasciando quelle che non sono così critiche.

Ho anche creato un corso gratuito di 12 parti su Flexbox. Dai un'occhiata qui se sei interessato!

Adesso cominciamo!

Il tuo primo layout Flexbox

I due componenti principali di un layout Flexbox sono il contenitore e gli articoli .

Ecco l'HTML per il nostro esempio, che contiene un contenitore con tre elementi:

 Home Search Logout 

Prima di trasformarlo in un layout Flexbox, gli elementi verranno impilati uno sopra l'altro in questo modo:

Ho aggiunto un po 'di stile, ma questo non ha nulla a che fare con Flexbox.

Ho aggiunto un po 'di stile, ma questo non ha nulla a che fare con Flexbox.

Per trasformarlo in un layout Flexbox, daremo semplicemente al contenitore la seguente proprietà CSS:

.container { display: flex; } 

Questo posizionerà automaticamente gli oggetti bene lungo l'asse orizzontale.

Se vuoi controllare il codice effettivo, puoi andare in questo parco giochi Scrimba.

Ora mescoliamo un po 'questi elementi.

Giustifica il contenuto e Allinea gli elementi

Justify-content e align-items sono due proprietà CSS che ci aiutano a distribuire gli elementi nel contenitore. Controllano il modo in cui gli elementi sono posizionati lungo l' asse principale e l' asse trasversale .

Nel nostro caso (ma non sempre) l'asse principale è orizzontale e l'asse trasversale è verticale:

In questo articolo, vedremo solo justify-content, poiché ho scoperto di utilizzare questo molto più di align-items. Tuttavia, nel mio corso Flexbox, spiego entrambe le proprietà in dettaglio.

Centriamo tutti gli elementi lungo l' asse principale utilizzando justify-content:

.container { display: flex; justify-content: center; } 

Oppure possiamo impostarlo su space-between, che aggiungerà spazio tra gli elementi, in questo modo:

.container { display: flex; justify-content: space-between; } 

Ecco i valori che puoi impostare justify-content:

  • flex-start ( predefinito )
  • estremità flessibile
  • centro
  • spazio tra
  • spazio intorno
  • in modo uniforme

Ti consiglio di giocare con questi e vedere come si comportano sulla pagina. Questo dovrebbe darti una corretta comprensione del concetto.

Controllo di un singolo oggetto

Possiamo anche controllare singoli articoli . Supponiamo, ad esempio, di voler mantenere i primi due elementi sul lato sinistro, ma spostare il logoutpulsante sul lato destro.

Per fare ciò useremo la buona vecchia tecnica di impostare il margine su auto.

.logout { margin-left: auto; } 

Se vogliamo che sia l' searchelemento che l' logoutelemento vengano spostati sul lato destro, aggiungeremo semplicemente margin-leftl' searchelemento all'elemento.

.search { margin-left: auto; } 

Spingerà l'elemento di ricerca il più a destra possibile, che di nuovo spingerà l'elemento di disconnessione con esso:

La proprietà flex

Finora abbiamo avuto solo articoli a larghezza fissa. Ma cosa succede se vogliamo che siano reattivi? Per ottenere ciò abbiamo una proprietà chiamata flex. Lo rende molto più semplice rispetto al vecchio modo di utilizzare le percentuali.

Ci rivolgiamo semplicemente tutti gli elementi e dare loro un flexvalore 1.

.container > div { flex: 1; } 

Come puoi vedere, allunga gli oggetti per riempire l'intero contenitore.

In molti casi, probabilmente vorresti che uno degli elementi occupasse la larghezza extra e quindi impostassi solo uno di essi in modo che abbia una larghezza flessibile. Possiamo, ad esempio, fare in modo che l' searchoggetto occupi tutto lo spazio extra:

.search { flex: 1; } 

Prima di concludere questo articolo, voglio menzionare che la proprietà flex è in realtà una scorciatoia di tre proprietà: flex-grow , flex-shrink e flex-base . Tuttavia, l'apprendimento richiede più di cinque minuti, quindi non rientra nello scopo di questo tutorial.

Se sei interessato a impararli, però, sto spiegando tutte e tre le proprietà in modo approfondito nel mio corso Flexbox gratuito.

Ora che hai imparato le basi sarai sicuramente pronto per seguire il mio corso completo e diventare un maestro Flexbox!

Grazie per aver letto! Mi chiamo Per Borgen, sono il co-fondatore di Scrimba, il modo più semplice per imparare a programmare. Dovresti controllare il nostro bootcamp responsive web design se vuoi imparare a costruire un sito web moderno a livello professionale.