Come utilizzare Flex per allineare elementi HTML

Le proprietà flex in CSS ti consentono di allineare gli elementi in modo più flessibile e reattivo. Ciò lo rende utile quando desideri che i tuoi elementi HTML siano più reattivi all'interno del browser web.

Questo articolo spiega come utilizzare determinate proprietà flessibili. Ciò include le proprietà flex-direction, justify-content, align-self, align-items, align-content e gap.

Come configurare il display CSS Flex

Una struttura di esempio che puoi usare per esplorare le basi di flexbox è un insieme di div figlio sotto un div genitore singolo. Nel codice seguente, c'è un div "genitore" principale. I tre div secondari rappresentano elementi che puoi allineare utilizzando le proprietà flessibili.

Affinché qualsiasi stile flessibile funzioni, dovrai aggiungere il display: flessibile proprietà al contenitore flex padre.

.genitore {
 display: flessibile;
}

Senza flex, i div figlio vengono visualizzati uno dopo l'altro in una formazione di colonne in fondo alla pagina.

Per visualizzare un esempio di questa configurazione, visualizzare ed eseguire il codice in questo Frammento di CodePen.

Come controllare la direzione del layout

Il direzione flessibile La proprietà determina la direzione della riga o della colonna degli elementi figlio.

Le opzioni per la proprietà flex-direction includono:

direzione flessibile: riga | colonna | riga-rovescio | colonna-rovescio

Dovrai aggiungere un contenitore principale che circonda gli elementi che desideri allineare.

HTML:

CSS:

.red { colore di sfondo: rosso; }
.orange { colore di sfondo: arancione; }
.giallo { colore di sfondo: giallo; }
.green { colore di sfondo: verde;}
.blue { colore di sfondo: blu; }
.viola { colore di sfondo: viola; }
.div genitore {
 larghezza: 40px;
 altezza: 40px;
}

Applicare la proprietà flex-direction al contenitore flex padre. Questo allineerà gli elementi div figlio.

.genitore {
 larghezza: 300px;
 display: flessibile; 
 direzione flessibile: riga;
}

Molte proprietà di flessione si riferiscono al concetto di asse principale e di asse trasversale. Quando la direzione flessibile è riga, l'asse principale rappresenta la direzione orizzontale e l'asse trasversale rappresenta la verticale. Un valore di colonna cambia questi assi.

Visualizza il codice per la proprietà flex-direction in questo Frammento di CodePen per vedere alcuni esempi.

Come allineare gli elementi lungo l'asse trasversale

Il allineare-oggetti controlla l'allineamento degli elementi lungo l'asse trasversale. Per la direzione flessibile predefinita, riga, align-items controlla l'allineamento verticale degli elementi.

Le opzioni per la proprietà align-items includono:

align-items: flex-start | estremità flessibile | allineare-elementi | stirata

Aggiungi la proprietà align-items al contenitore padre per allineare i suoi figli.

.genitore {
 display: flessibile; 
 align-item: flex-start;
}

Inoltre, puoi scegliere di allineare gli elementi utilizzando una linea di base. Per impostazione predefinita, l'opzione di base allinea tutti gli elementi in base alla base degli elementi.

Puoi anche scegliere da dove inizia la linea di base, ad esempio la parte superiore (prima linea di base) o la parte inferiore (ultima linea di base).

align-items: baseline | prima linea di base | ultima linea di base;

Per align-items: baseline per funzionare, assicurati che ogni articolo abbia un'altezza o una larghezza diverse (a seconda dell'asse che stai utilizzando).

​​​

Visualizza il codice per la proprietà align-items in questo Frammento di CodePen per vedere alcuni esempi.

Come sovrascrivere l'allineamento su singoli elementi

Puoi usare il allineare-sé per sovrascrivere qualsiasi stile align-items del contenitore padre. Ciò significa che puoi impostare un allineamento flessibile separato su un singolo articolo.

Le opzioni per la proprietà align-self includono:

align-self: auto | flex-start | estremità flessibile | centro | linea di base | stirata

Supponiamo, ad esempio, che il contenitore padre abbia uno stile di direzione flessibile impostato su "riga".

.genitore {
 display: flessibile; 
 direzione flessibile: riga;
}

È possibile applicare la proprietà align-self al singolo elemento. Il singolo elemento utilizzerà lo stile della proprietà align-self e centra l'elemento sul contenitore padre.

Visualizza il codice per la proprietà align-self in questo Frammento di CodePen per vedere alcuni esempi.

Come distribuire le linee attraverso l'asse trasversale

Il align-content la proprietà allinea i figli lungo l'asse verticale. Può anche determinare la spaziatura tra gli elementi che si trovano su più righe.

Le opzioni per la proprietà align-content includono:

align-content: flex-start | estremità flessibile | centro | allungare | spazio tra | spazio intorno

Aggiungi la proprietà align-content al contenitore flex padre. La proprietà align-content funzionerà solo se è impostata la proprietà flex-wrap. Aggiungi flex-wrap: avvolgi nel contenitore padre e riduci la larghezza del div padre per forzare gli elementi su più di una riga.

.genitore {
 flex-wrap: avvolgere;
 display: flessibile;
 align-content: flex-start;
 larghezza: 180px;
}

Visualizza il codice per la proprietà align-content in questo Frammento di CodePen per vedere alcuni esempi.

Come allineare gli elementi sull'asse principale

Il giustificare-contenuto la proprietà aggiunge l'allineamento a destra, a sinistra o al centro agli elementi figlio. Inoltre, distribuisce gli elementi aggiungendo spazi tra di loro quando si giustifica il contenuto.

Le opzioni per la proprietà justify-content includono:

giustifica-contenuto: flex-start | estremità flessibile | centro | spazio tra | spazio-intorno | spazio-in modo uniforme

Avvolgi gli elementi che desideri allineare sotto un contenitore flessibile principale.

HTML:

CSS:

.red { colore di sfondo: rosso; }
.green { colore di sfondo: verde chiaro; }
.blue { colore di sfondo: blu; }

Aggiungi la proprietà justify-content al contenitore flex padre.

.genitore {
 larghezza: 300px;
 display: flessibile; 
 giustifica-contenuto: flex-start;
}

La proprietà justify-content supporta anche i valori elencati nella specifica CSS Box Alignment. Ciò include valori come "inizio", "fine", "sinistra" e "destra". Alcuni browser non li supportano.

La proprietà justify-content ha anche una parola chiave "sicura" che puoi usare. Ciò garantisce che gli elementi cerchino di rimanere all'interno dell'intervallo del contenitore padre.

Viene anche utilizzato per prevenire la perdita di dati, nel caso in cui si centra una parola lunga. L'uso della parola chiave safe impedisce a un div più breve di tagliare la prima e l'ultima lettera.

.genitore {
 display: flessibile; 
 giustificare-contenuto: centro sicuro;
}

La parola chiave safe è anche limitata a determinati browser. Puoi verificare la compatibilità su Posso usare.

Visualizza il codice per la proprietà justify-content in questo Frammento di CodePen per vedere alcuni esempi.

Come aggiungere spazio tra gli elementi

Il spacco la proprietà consente di aggiungere una quantità di spazio tra gli elementi. È uno dei nuove funzionalità CSS che possono aiutarti a creare un layout reattivo.

Applicare la proprietà gap al contenitore flessibile padre.

.genitore {
 display: flessibile;
 divario: 70px;
}

Se aggiungi uno spazio vuoto che costringe la lunghezza degli elementi a superare la larghezza del genitore, gli elementi si ridurranno per cercare di adattarsi all'interno della riga.

.genitore { 
 larghezza: 300px;
 divario: 120px;
}

Se usi flex-wrap: wrap per spingere gli elementi su una nuova riga, l'importo dello spazio vuoto si applicherà anche allo spazio tra le righe.

.genitore { 
 larghezza: 300px;
 flex-wrap: avvolgere;
 divario: 120px;
}

Inoltre, puoi anche impostare il spazio di fila e spazio tra le colonne proprietà. Ancora una volta, dovrai applicarli al contenitore flessibile principale.

La proprietà row-gap determina lo spazio tra ogni riga. La proprietà column-gap determina lo spazio tra ogni colonna.

.genitore { 
 spazio tra le righe: 120px; 
}
.genitore { 
 spazio tra le colonne: 120px; 
}

Visualizza il codice per la proprietà gap in questo Frammento di CodePen per vedere alcuni esempi.

Utilizzo di più proprietà flessibili sul tuo sito web

Si spera che ora tu abbia familiarità con le varie proprietà flessibili che puoi utilizzare per allineare gli elementi sulla tua pagina web. Ciò include come utilizzare le proprietà flex-direction, justify-content, align-self, align-items, align-content e gap.

Flexbox è una potente tecnica di layout, ma è solo una piccola parte dei CSS. Puoi anche conoscere le nuove proprietà CSS, le tecniche di codifica pulite e gli strumenti utilizzati per l'ottimizzazione CSS.

11 strumenti utili per controllare, pulire e ottimizzare i file CSS

Leggi Avanti

Circa l'autore