FlexBox

Nota: FlexBox è attualmente un'API sperimentale e probabilmente cambierà in futuro. Segnala eventuali problemi nello strumento Issue Tracker.

FlexBox è un contenitore che dispone gli elementi in una sola direzione. Può ridimensionare, mandare a capo, allineare e distribuire lo spazio tra gli elementi per riempire in modo ottimale lo spazio disponibile. È un layout utile per elementi di dimensioni diverse e per ridimensionare gli elementi quando lo spazio disponibile cambia.

Con FlexBox puoi:

• Controllare la crescita e la riduzione degli elementi per riempire lo spazio disponibile
• Disporre gli elementi su nuove righe o colonne quando non c'è spazio sufficiente
• Distribuire lo spazio aggiuntivo tra gli elementi utilizzando comodi preset

Quando utilizzare FlexBox

FlexBox viene in genere utilizzato per visualizzare un numero ridotto di elementi all'interno di un layout dello schermo complessivo. Per un layout generale dello schermo, Grid è in genere una scelta migliore. FlexBox non supporta il caricamento differito degli elementi. Per visualizzare un numero elevato di elementi, utilizza elenchi e griglie pigri. Se devi andare a capo, utilizza FlexBox anziché FlowRow e FlowColumn.

Terminologia e concetti

Punto chiave: FlexBox è fortemente influenzato dalla specifica del layout della casella flessibile CSS e presenta concetti, terminologia e comportamento quasi identici. Se hai familiarità con display: flex, troverai le proprietà e il comportamento di FlexBox quasi identici.

FlexBox dispone gli elementi in linee orizzontali o verticali. Questa direzione di queste linee stabilisce l'asse principale. L'asse trasversale è perpendicolare all'asse principale. La lunghezza di FlexBox lungo l'asse principale è nota come dimensione principale. La lunghezza dell'asse trasversale corrispondente è nota come dimensione croce. Queste dimensioni e questi assi costituiscono la base del comportamento di FlexBox.

Figura 1. Assi e dimensioni quando la direzione di FlexBox è Row.

Figura 2. Assi e dimensioni quando la direzione di FlexBox è Column.

Applicare le proprietà

Puoi applicare le proprietà FlexBox in due modi:

• Al container FlexBox utilizzando FlexBox(config)
• A un elemento all'interno di FlexBox utilizzando Modifier.flex

Proprietà container (config)

Proprietà degli elementi (Modifier.flex)

direction: la direzione del layout dell'elemento wrap: indica se eseguire il wrapping degli elementi se la dimensione principale non è sufficiente justifyContent: come distribuire gli elementi lungo l'asse principale alignItems - come allineare gli elementi lungo l'asse trasversale alignContent - come distribuire lo spazio extra della dimensione della croce quando ci sono più righe rowGap / columnGap: aggiunge spazio tra elementi e righe Per ulteriori informazioni su queste proprietà, consulta Impostare il comportamento del contenitore.

basis: la dimensione dell'elemento prima che venga distribuito lo spazio aggiuntivo della dimensione principale grow: la quota di spazio aggiuntivo rispetto alla taglia principale che deve ricevere questo articolo shrink: la quota di deficit di spazio della taglia principale che questo articolo deve ricevere alignSelf: come distribuire lo spazio aggiuntivo della dimensione croce a questo elemento, sostituisce alignItems order: controlla l'ordine del layout Per ulteriori informazioni su queste proprietà, consulta Impostare il comportamento degli elementi.

Informazioni sull'algoritmo di layout FlexBox

Una delle funzionalità più potenti di FlexBox è la capacità di ridimensionare i suoi elementi secondari per adattarsi al meglio allo spazio disponibile. Comprendere come FlexBox esegue questa operazione può aiutarti a impostare le proprietà FlexBox per ottimizzare la UI per tutte le dimensioni possibili.

L'algoritmo di layout di FlexBox funziona nel seguente modo:

1. Calcola la dimensione di base del figlio: utilizza il valore basis del figlio per calcolare la sua dimensione iniziale lungo l'asse principale prima che venga distribuito lo spazio aggiuntivo.

2. Ordina i figli: ordina i figli in base ai valori di order, se presenti.

3. Righe di costruzione: per ogni elemento secondario, controlla se la sua dimensione iniziale più gap rientra nello spazio rimanente sulla riga corrente. In questo caso, inserisci il bambino in coda. In caso contrario, inseriscilo in una nuova riga se il wrapping è attivato oppure inseriscilo nella riga corrente dove verrà visualizzato in overflow (sarà parzialmente oscurato dal bordo del contenitore).

4. Allinea o ridimensiona gli elementi nell'asse principale: per ogni riga, distribuisci lo spazio aggiuntivo a o tra gli elementi ridimensionandoli o allineandoli.

5. Allinea o ridimensiona gli elementi nell'asse trasversale: per ogni riga, distribuisci lo spazio aggiuntivo agli elementi e alle righe o tra di loro allungandoli o allineandoli.

Ora che hai familiarità con i concetti di FlexBox, consulta la sezione Inizia per creare un FlexBox di base.