Flexbox (CSS Flexible Box Layout) è un modo per disporre in modo flessibile gli elementi in un container (chiamato container flessibile). Gli elementi all'interno del contenitore (chiamati elementi flessibili) possono crescere o ridursi per ottimizzare lo spazio del contenitore mantenendo l'ordine e la spaziatura specificati. Può esserti utile in particolare flexbox se vuoi allineare gli elementi di diverse dimensioni in righe o colonne, con gli elementi più grandi che occupano più spazio di quelli più piccoli.
Impostazioni flexbox
Le impostazioni flexbox sono disponibili nel riquadro Adattabili della scheda Flexbox.
Usare flexbox
Per utilizzare flexbox, seleziona la casella di controllo Utilizza flexbox. L'elemento principale corrente diventa il contenitore flessibile e le proprietà flexbox diventano disponibili nel riquadro Adattabili.
Flexbox non è disponibile se:
- L'elemento principale corrente è un elemento di testo come
<p>o<h1>. - L'elemento principale corrente contiene elementi incorporati come
<span>o<a>. Questo non si applica se l'elemento principale è una pagina.
Tutti gli elementi secondari diretti del contenitore flessibile diventano elementi flessibili. I livelli guida sono esclusi. Gli elementi flessibili sono disposti lungo un asse principale, che può essere impostato come orizzontale o verticale. Puoi anche configurare la direzione del flusso dei contenuti lungo l'asse. Poiché l'orientamento e la direzione del flexbox sono modificabili, le proprietà vengono impostate su valori come "flex-start" e "flex-end" anziché in alto, in basso, a sinistra o a destra.
Direzione
La direzione determina il modo in cui sono disposti gli elementi flessibili impostando l'asse principale e la direzione del flusso lungo l'asse.
| Direzione | Comportamento | Asse principale |
|---|---|---|
| riga | Gli elementi flessibili sono disposti in righe, nella direzione del flusso del testo (a partire da sinistra per le lingue da sinistra a destra, come l'inglese). |
Orizzontale |
| inversione di riga | Gli elementi flessibili sono disposti in righe, nella direzione inversa del flusso di testo (a partire da destra per le lingue da sinistra a destra, come l'inglese). |
Orizzontale |
| colonna | Gli elementi flessibili sono disposti in colonne nella direzione del flusso dei contenuti (generalmente a partire dall'alto). |
Verticale |
| inversione di colonna | Gli elementi flessibili sono disposti in colonne, nella direzione inversa del flusso di contenuti (di solito partendo dal basso). |
Verticale |
Spaziatura
La spaziatura stabilisce se gli elementi flessibili vengono distanziati automaticamente o utilizzando distanze fisse.
| Spaziatura | Comportamento |
|---|---|
| Standard | Gli elementi flessibili vengono disposti automaticamente all'interno del contenitore flessibile in base alle impostazioni di giustificazione, aggregazione e allineamento specificate. |
| Fissa | Gli elementi flessibili sono disposti in base alla spaziatura secondaria specificata e alla spaziatura interna del confine. |
Giustificazione
La giustificazione determina il modo in cui gli elementi flessibili sono disposti lungo l'asse principale. Questa impostazione è disponibile quando utilizzi la spaziatura standard.
| Giustificazione | Comportamento |
|---|---|
| flex all'inizio | Gli elementi flessibili sono pacchettizzati sul bordo iniziale della riga o della colonna. |
| flex alla fine | Gli elementi flessibili sono pacchettizzati sul bordo finale della riga o della colonna. |
| al centro | Gli elementi flessibili sono centrati sull'asse principale. |
| fra lo spazio | Gli elementi flessibili sono distanziati lungo l'asse principale, con gli elementi iniziale e finale sui bordi del contenitore. |
| nello spazio | Gli elementi flessibili sono distanziati uniformemente lungo l'asse principale, con metà dello spazio su entrambe le estremità. |
| in modo uniforme | Gli elementi flessibili sono distanziati in modo uniforme lungo l'asse principale, con la stessa quantità di spazio su entrambi i lati degli elementi iniziali e finali. |
Allineamento trasversale
L'allineamento trasversale è il modo in cui gli elementi flessibili sono disposti lungo l'asse tra la riga o la colonna corrente.
| Allineamento trasversale | Comportamento |
|---|---|
| flex all'inizio | Gli elementi flessibili vengono posizionati sul bordo iniziale dell'asse trasversale. |
| flex alla fine | Gli elementi flessibili vengono posizionati sul bordo finale dell'asse trasversale. |
| al centro | Gli elementi flessibili sono centrati lungo l'asse trasversale. |
| allungato | Gli elementi flessibili si estendono per riempire lo spazio disponibile lungo l'asse trasversale. |
| base | Gli elementi flessibili vengono posizionati lungo l'asse trasversale in modo che le relative basi di riferimento siano allineate. |
Aggregazione
L'aggregazione determina se i contenuti vengono aggregati all'interno del container. Questa impostazione è disponibile quando utilizzi la spaziatura standard.
| Aggregazione | Comportamento |
|---|---|
| nessuna aggregazione | Gli elementi flessibili sono disposti in una singola riga o colonna. |
| aggregazione | Gli elementi flessibili possono essere aggregati per formare più righe o colonne quando gli elementi flessibili sono troppo grandi per rientrare in un'unica riga. |
| inversione di aggregazione | Gli elementi flessibili possono essere aggregati per formare più righe o colonne quando gli elementi flessibili sono troppo grandi per rientrare in un'unica riga. La direzione dell'asse trasversale è invertita. |
Allineamento a capo
L'allineamento dell'avvolgimento imposta la disposizione delle righe o delle colonne lungo l'asse trasversale (perpendicolare all'asse principale) se sono presenti più righe o colonne nel contenitore flessibile. Questa impostazione è disponibile quando sono attivati lo spazio e l'aggregazione standard.
| Allineamento a capo | Comportamento |
|---|---|
| flex all'inizio | Le righe o le colonne sono imballate in corrispondenza del bordo iniziale del contenitore. |
| flex alla fine | Le righe o le colonne sono posizionate sul bordo finale del contenitore. |
| al centro | Le righe o le colonne sono centrate lungo l'asse trasversale. |
| allungato | Le righe o le colonne sono estese per riempire lo spazio disponibile lungo l'asse trasversale, a meno che non abbiano un'altezza definita. |
| fra lo spazio | Le righe o le colonne sono distanziate uniformemente lungo l'asse trasversale, con le righe o le colonne iniziali e finali ai bordi del container. |
| nello spazio | Le righe o le colonne sono distanziate uniformemente sull'asse trasversale, con la metà dello spazio su entrambe le estremità. |
Spaziatura secondaria
La distanza in pixel mantenuta tra due elementi nel contenitore flessibile. Questa impostazione è disponibile quando utilizzi la spaziatura fissa.
Spaziatura dei limiti
La distanza in pixel mantenuta tra gli elementi esterni e il contenitore flessibile. Questa impostazione è disponibile quando utilizzi la spaziatura fissa.
Ordine elementi secondari
Gli elementi contenuti nel flexbox sono elencati qui. Per riordinarli, trascina le voci nella nuova posizione nell'elenco.
Puoi anche spostare gli elementi flessibili sullo stage per riordinarli.
Proprietà secondarie flexbox
Gli elementi flessibili hanno le loro proprietà. Seleziona l'elemento secondario per visualizzare e modificare le relative impostazioni di flexbox.
Anche se gli articoli flessibili possono crescere o rimpicciolirsi, rispettano le larghezze e le altezze minime e massime. Le relative proprietà Sinistra e In alto sono disabilitate, dal momento che gli elementi flessibili sono disposti in base alle impostazioni flexbox, ma le proprietà Traduzione possono essere utilizzate per compensare le loro posizioni.
Allineamento trasversale
L'allineamento trasversale di un elemento flessibile sostituisce l'allineamento predefinito tra gli assi impostato per il contenitore.
| Allineamento trasversale | Comportamento |
|---|---|
| auto | L'elemento flessibile utilizza l'impostazione di allineamento trasversale per il contenitore flessibile. |
| base | La base di riferimento dell'elemento flessibile è in linea con le linee guida di altri elementi flessibili con allineamento di riferimento. |
| al centro | L'elemento flessibile è posizionato al centro dell'asse trasversale. |
| flex alla fine | L'elemento flessibile viene posizionato lungo l'asse trasversale sul bordo finale del contenitore. |
| flex all'inizio | L'elemento flessibile viene posizionato lungo l'asse trasversale sul bordo iniziale del contenitore. |
| allungato | L'elemento flessibile si estende fino al riempimento del contenitore lungo l'asse trasversale, a meno che non abbia un'altezza definita. |
Espansione flessibile
Il fattore di crescita flessibile determina quanto l'elemento flessibile crescerà per riempire lo spazio disponibile nel contenitore flessibile lungo l'asse principale, in proporzione ai fattori di crescita flessibile degli altri elementi nella stessa riga o colonna. Questa impostazione è disponibile quando utilizzi la spaziatura standard.
Ad esempio, se una riga contiene tre elementi flessibili con fattori di crescita flessibili di 1, 1 e 2, l'ultimo elemento flessibile occuperà il doppio dello spazio disponibile nella riga rispetto a tutti gli altri elementi flessibili.
Se il totale di tutti i fattori di crescita flessibili per gli elementi in una riga o di una colonna è inferiore a 1, gli elementi flessibili potrebbero non utilizzare tutto lo spazio disponibile.
Quando il fattore di crescita flessibile è 0, l'elemento flessibile non cresce.
Riduzione flessibile
Il fattore di restringimento flessibile determina quanto l'elemento flessibile si restringe per adattarsi al contenitore flessibile lungo l'asse principale, in proporzione ai fattori di restringimento flessibile degli altri elementi della stessa riga o colonna. Questa impostazione è disponibile quando utilizzi la spaziatura standard.
Ad esempio, se una riga contiene tre elementi flessibili con fattori di restringimento flessibili di 1, 1 e 2, l'ultimo elemento flessibile si ridurrà maggiormente rispetto agli altri elementi flessibili. I fattori di restringimento flessibili tengono conto delle dimensioni dell'elemento flessibile.
Quando il fattore di riduzione flessibile è 0, l'elemento flessibile non si ridurrà.