Definir o comportamento do contêiner

Para configurar o comportamento do FlexBox contêiner, crie um FlexBoxConfig bloco e forneça-o usando o config parâmetro.

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

Use FlexBoxConfig para definir a direção do layout, o comportamento de quebra de linha, o alinhamento e as lacunas entre os itens.

Direção do layout

A função direction define o eixo principal, que determina a direção em que os itens são dispostos. Ela aceita os seguintes valores:

Row (padrão): define o eixo principal como horizontal. Em locais da esquerda para a direita, ele será da esquerda para a direita, com o oposto em locais da direita para a esquerda.
RowReverse: inverte a direção de Row.
Column: define o eixo principal como vertical, de cima para baixo.
ColumnReverse: inverte a direção de Column.

Alinhar itens e distribuir espaço extra

As seções a seguir descrevem como alinhar itens e distribuir espaço extra ao longo dos eixos principal e transversal.

Ao longo do eixo principal

Use justifyContent para distribuir itens ao longo do eixo principal. A tabela a seguir mostra o comportamento quando a direção é Row.


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

Ao longo do eixo transversal

Use alignItems para alinhar itens ao longo do eixo transversal em uma única linha. Esse comportamento pode ser substituído por itens individuais usando o alignSelf modificador.

As imagens a seguir mostram o comportamento quando a direção é Row:


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

Use alignContent para alinhar linhas ao eixo transversal e distribuir espaço extra entre elas. Essa propriedade só se aplica quando há várias linhas (a quebra de linha está ativada). As imagens a seguir mostram o comportamento quando a direção é Row:


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

Unir itens

A união permite que um contêiner FlexBox se torne multilinha, movendo itens que não cabem em uma nova linha ou coluna ao longo do eixo transversal. Configure o comportamento de união usando wrap.

Valor de `FlexWrap`	Exemplo usando a direção `Row`
`NoWrap` (padrão): impede que os itens sejam unidos. Os itens vão transbordar se o tamanho principal for insuficiente.
`Wrap`: quando não há espaço suficiente para um item (mais qualquer lacuna), uma nova linha é criada na direção do eixo transversal. Por exemplo, se a direção for `Row`, uma nova linha será adicionada abaixo.
`WrapReverse`: igual a `Wrap`, exceto que a nova linha é adicionada na direção oposta ao eixo transversal. Por exemplo, se a direção for `Row`, uma nova linha será adicionada acima.

O exemplo a seguir mostra como o algoritmo de união FlexBox funciona. O contêiner FlexBox tem um tamanho principal de 100dp, com wrap definido como FlexWrap.Wrap e uma lacuna de 8dp. Ele contém três itens com basis 20dp, 40dp e 50dp, respectivamente.

Há 100dp de espaço disponível na linha. O filho 1 é 20dp. Há espaço, então o filho 1 é colocado na linha.

Primeiro item colocado no contêiner FlexBox. — **Figura 1.** Primeiro item colocado no contêiner `FlexBox`.

Há 80dp de espaço disponível na linha. A lacuna é 8dp. O filho 2 é 40dp. O espaço necessário é 48dp. Há espaço, então a lacuna e o filho 2 são colocados na linha.

Há 32dp de espaço disponível na linha. A lacuna é 8dp. O filho 3 é 50dp. O espaço necessário é 58dp. Não há espaço suficiente na linha atual, então o filho 3 é colocado em uma nova linha.