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:

• 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 solitamente 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 racchiudere gli elementi, utilizza FlexBox anziché FlowRow e FlowColumn.

Terminologia e concetti

Punto chiave: FlexBox è fortemente influenzato dalla specifica del layout a scatole flessibili 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 i suoi elementi in linee orizzontali o verticali. Questa direzione di queste linee stabilisce l'asse principale. L'angolo di 90 gradi rispetto all'asse principale è l'asse trasversale. 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à del contenitore (config)

Proprietà dell'elemento (Modifier.flex)

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

basis: le dimensioni dell'elemento prima della distribuzione di spazio aggiuntivo dalla dimensione principale grow: la quota di spazio aggiuntivo rispetto alle dimensioni principali che questo elemento deve ricevere shrink: la quota di spazio mancante rispetto alla dimensione principale che questo elemento dovrebbe ricevere alignSelf - come distribuire lo spazio aggiuntivo della dimensione croce a questo elemento, esegue l'override di alignItems order: controlla l'ordine del layout Per saperne di più su queste proprietà, consulta Impostare il comportamento degli elementi.

Comprendere l'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à 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 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 figlio, verifica se la sua dimensione iniziale più gap rientrerà nello spazio rimanente sulla riga corrente. In questo caso, inserisci il bambino nella 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 extra 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.