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 (predefinito): imposta l'asse principale in orizzontale. Nelle impostazioni internazionali da sinistra a destra, la direzione sarà da sinistra a destra, mentre in quelle da destra a sinistra sarà il contrario.
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 aggiuntivo lungo gli assi principale e trasversale.

Lungo l'asse principale

Utilizza justifyContent per distribuire gli elementi lungo l'asse principale. La seguente tabella 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 ignorato dai singoli elementi utilizzando il modificatore alignSelf.

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


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

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


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

Aggregare elementi

Il wrapping consente a un contenitore FlexBox di diventare multilinea, 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 di utilizzo della direzione `Row`
`NoWrap` (valore predefinito): impedisce il wrapping degli elementi. Gli elementi vanno in overflow se la dimensione principale non è sufficiente.
`Wrap`: quando lo spazio per un elemento (più l'eventuale spazio) 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 linea 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 contenitore 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.

C'è 100dp spazio disponibile nella coda. Il bambino 1 è 20dp. C'è spazio, quindi il bambino 1 viene inserito nella fila.

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

C'è 80dp spazio disponibile nella coda. Il divario è 8dp. Il bambino 2 è 40dp. Lo spazio richiesto è 48dp. C'è spazio, quindi lo spazio e Child 2 vengono inseriti nella riga.

C'è 32dp spazio disponibile nella coda. Il divario è 8dp. Il bambino 3 è 50dp. Lo spazio richiesto è 58dp. Non c'è spazio sufficiente nella riga corrente, quindi Child 3 viene inserito in una nuova riga.

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

Aggiungere spazi tra gli elementi

Aggiungi spazi tra righe e colonne utilizzando rowGap e columnGap. È utile per evitare di aggiungere modificatori di spaziatura ai caratteri secondari.