FlexBox

FlexBox è un contenitore che dispone gli elementi in un'unica 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:

• Controlla il modo in cui gli elementi si espandono e si riducono per riempire lo spazio disponibile
• Inserisci gli elementi in nuove righe o colonne quando non c'è spazio sufficiente
• Distribuisci lo spazio aggiuntivo tra gli elementi utilizzando comodi preset

Quando utilizzare FlexBox

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

Terminologia e concetti

FlexBox dispone i suoi elementi in linee orizzontali o verticali. La direzione di queste linee stabilisce l'asse principale. A 90 gradi rispetto all'asse principale si trova l'asse trasversale. La lunghezza di FlexBox lungo l'asse principale è nota come dimensione principale. La lunghezza dell'asse trasversale corrispondente è nota come dimensione trasversale. Queste dimensioni e questi assi costituiscono la base del comportamento di FlexBox.

Applica 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à del container (config)

Proprietà degli elementi (Modifier.flex)

direction: la direzione del layout dell'elemento wrap: indica se andare a capo con gli 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 aggiuntivo dalla dimensione trasversale quando sono presenti più righe rowGap / columnGap: aggiunge spazio tra elementi e righe Per saperne di più su queste proprietà, consulta Imposta il comportamento del contenitore.

basis: le dimensioni dell'elemento prima che venga distribuito lo spazio aggiuntivo della dimensione principale grow: la quota di spazio aggiuntivo rispetto alle dimensioni principali che questo elemento deve ricevere shrink: la quota di deficit di spazio rispetto alla dimensione principale che questo elemento deve ricevere alignSelf: come distribuire lo spazio aggiuntivo dalla dimensione trasversale a questo elemento, esegue l'override di alignItems order: controlla l'ordine del layout Per saperne di più su queste proprietà, consulta Imposta 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 adattarli al meglio allo spazio disponibile. Capire come FlexBox esegue questa operazione può aiutarti a impostare le proprietà di 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 dell'elemento secondario: utilizza il valore basis dell'elemento secondario per calcolare la sua dimensione iniziale lungo l'asse principale prima che venga distribuito lo spazio aggiuntivo.

2. Ordina gli elementi secondari: ordina gli elementi secondari in base ai relativi valori order, se presenti.

3. Crea righe: per ogni elemento secondario, controlla se le sue dimensioni iniziali più gap rientrano nello spazio rimanente della riga corrente. In questo caso, inserisci questo elemento secondario nella riga. In caso contrario, lo posiziona su una nuova riga se è attiva l'opzione di ritorno a capo oppure lo posiziona nella riga corrente, dove l'elemento andrà 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 tra o tra gli elementi ridimensionandoli o allineandoli.

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

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