In questo post imparerai i concetti più importanti del layout flexbox in CSS, che ti semplificheranno la vita se ti ritroverai a lottare con i layout CSS di tanto in tanto.

Ci concentreremo solo sui principi fondamentali, tralasciando le cose di cui non dovresti preoccuparti finché non avrai compreso le basi.

Dovresti anche controllare lo screencast di base di CSS flexbox che ho creato. È interattivo, quindi puoi davvero giocare con il codice!

1. Il contenitore e l'oggetto

I due componenti principali di un layout flexbox sono il contenitore (blu) e gli articoli (rosso). Nell'esempio che vedremo in questo tutorial, sia il contenitore che l' elemento sono div. Controlla il codice boilerplate qui se sei interessato.

Layout orizzontale

Per creare un layout flessibile, assegna semplicemente al contenitore la seguente proprietà CSS.

.container {
    display: flex;
}

Nota che non devi ancora fare nulla con gli oggetti . Saranno ben posizionati automaticamente lungo l'asse orizzontale.

Layout verticale

Nel layout sopra, l' asse principale è quello orizzontale e l' asse trasversale è quello verticale. Il concetto di assi è importante da comprendere per utilizzare correttamente il flex.

Puoi scambiare i due assi aggiungendo flex-direction : column.

.container {
    display: flex;
    flex-direction: column;
}

2. Giustifica il contenuto e allinea gli elementi

Per rendere nuovamente orizzontale l'elenco, possiamo cambiare la direzione della flessione da colonna a riga, poiché questo ribalta nuovamente gli assi del layout flessibile.

Il motivo per cui è importante capire gli assi è perché gli attributi justify-content e align-items controllano il modo in cui gli elementi sono posizionati rispettivamente lungo l' asse principale e l' asse trasversale .

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

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

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

giustificare-contenuto:

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

• inizio flessibile
• estremità flessibile
• centro
• linea di base
• allungare (predefinito)

3. Gli articoli

L'ultima cosa che impareremo sono gli articoli stessi e come aggiungere stili specifici a ciascuno di essi.

Supponiamo di voler regolare la posizione del primo elemento. Lo facciamo assegnandogli un attributo CSS di align-self , che accetta esattamente gli stessi valori di align-items :

.item1 {
  align-self: flex-end;
}

E questo è tutto!

Ovviamente c'è molto di più da imparare su flexbox, ma i concetti sopra sono quelli che uso più spesso e quindi più importanti da capire correttamente.

Grazie per aver letto! Il mio nome è Per, sono un co-fondatore di Scrimba - un modo migliore per insegnare e imparare il codice.

Se hai letto fin qui, ti consiglio di dare un'occhiata a questa demo!