Imposta il comportamento del contenitore

Per configurare il comportamento del container FlexBox, crea un blocco FlexBoxConfig e forniscilo utilizzando il parametro config.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Utilizza FlexBoxConfig per definire la direzione del layout, il comportamento di wrapping, l'allineamento e gli spazi tra gli elementi.

Direzione del layout

La funzione direction imposta l'asse principale, che determina la direzione in cui vengono disposti gli elementi. Accetta i seguenti valori:

Row (valore predefinito): imposta l'asse principale in orizzontale. Nelle impostazioni internazionali da sinistra a destra, sarà da sinistra a destra, con l'opposto nelle impostazioni internazionali da destra a sinistra.
RowReverse: inverte la direzione di Row.
Column: imposta l'asse principale in verticale, dall'alto verso il basso.
ColumnReverse: inverte la direzione di Column.

Allineare gli elementi e distribuire lo spazio extra

Le sezioni seguenti descrivono come allineare gli elementi e distribuire lo spazio extra lungo gli assi principale e trasversale.

Lungo l'asse principale

Utilizza justifyContent per distribuire gli elementi lungo l'asse principale. La tabella seguente mostra il comportamento quando la direzione è Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Lungo l'asse trasversale

Utilizza alignItems per allineare gli elementi lungo l'asse trasversale all'interno di una singola riga. Questo comportamento può essere sostituito dai singoli elementi utilizzando il alignSelf modificatore.

Le immagini seguenti mostrano il comportamento quando la direzione è Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Utilizza alignContent per allineare le righe all'asse trasversale e per distribuire lo spazio extra tra le righe. Questa proprietà si applica solo quando sono presenti più righe (il wrapping è abilitato). Le immagini seguenti mostrano il comportamento quando la direzione è Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Aggregare elementi

Il wrapping consente a un container FlexBox di diventare multiriga, spostando gli elementi che non rientrano in una nuova riga o colonna lungo l'asse trasversale. Configura il comportamento di wrapping utilizzando wrap.

Valore `FlexWrap`	Esempio che utilizza la direzione `Row`
`NoWrap` (valore predefinito): impedisce il wrapping degli elementi. Se la dimensione principale non è sufficiente, gli elementi vanno in overflow.
`Wrap`: quando lo spazio per un elemento (più eventuali spazi) non è sufficiente, viene creata una nuova riga nella direzione dell'asse trasversale. Ad esempio, se la direzione è `Row`, viene aggiunta una nuova riga sotto.
`WrapReverse`: come `Wrap`, tranne per il fatto che la nuova riga viene aggiunta nella direzione opposta all'asse trasversale. Ad esempio, se la direzione è `Row`, viene aggiunta una nuova riga sopra.

Il seguente esempio mostra come funziona l'algoritmo di wrapping FlexBox. Il container FlexBox ha una dimensione principale di 100dp, con wrap impostato su FlexWrap.Wrap e uno spazio di 8dp. Contiene tre elementi con basis 20dp, 40dp e 50dp rispettivamente.

Nella riga è disponibile uno spazio di 100dp. L'elemento secondario 1 è 20dp. Lo spazio è sufficiente, quindi l'elemento secondario 1 viene inserito nella riga.

Il primo elemento inserito nel contenitore FlexBox. — **Figura 1.** Il primo elemento è posizionato nel container `FlexBox`.

Nella riga è disponibile uno spazio di 80dp. Lo spazio è 8dp. L'elemento secondario 2 è 40dp. Lo spazio richiesto è 48dp. Lo spazio è sufficiente, quindi lo spazio e l'elemento secondario 2 vengono inseriti nella riga.

Nella riga è disponibile uno spazio di 32dp. Lo spazio è 8dp. L'elemento secondario 3 è 50dp. Lo spazio richiesto è 58dp. Lo spazio nella riga corrente non è sufficiente, quindi l'elemento secondario 3 viene inserito in una nuova riga.

Il terzo elemento è posizionato su una nuova riga perché non rientra nella prima riga. — **Figura 3.** Il terzo elemento viene inserito in una nuova riga perché non rientra nella prima riga.

Aggiungere spazi tra gli elementi

Aggiungi spazi tra righe e colonne utilizzando rowGap e columnGap. Questa opzione è utile per evitare di aggiungere modificatori di spaziatura agli elementi secondari.