Definir o comportamento do contêiner

Para configurar o comportamento do contêiner FlexBox, crie um bloco FlexBoxConfig e forneça-o usando o parâmetro 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

Use FlexBoxConfig para definir a direção do layout, o comportamento de quebra de texto, o alinhamento e os espaços 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 organizados. Ele aceita os seguintes valores:

Row (padrão): define o eixo principal como horizontal. Em locais da esquerda para a direita, a ordem é da esquerda para a direita, e o contrário 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 cruzado.

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 cruzado em uma única linha. Esse comportamento pode ser substituído por itens individuais usando o modificador alignSelf.

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


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

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


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

Unir itens

O agrupamento permite que um contêiner FlexBox se torne multilinha, movendo itens que não cabem para uma nova linha ou coluna ao longo do eixo cruzado. Configure o comportamento de quebra de texto usando wrap.

Valor `FlexWrap`	Exemplo usando a direção `Row`
`NoWrap` (padrão): impede que os itens sejam quebrados. Os itens vão transbordar se o tamanho principal for insuficiente.
`Wrap`: quando não há espaço suficiente para um item (mais uma lacuna), uma nova linha é criada na direção do eixo cruzado. 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 cruzado. Por exemplo, se a direção for `Row`, uma nova linha será adicionada acima.

O exemplo a seguir mostra como o algoritmo de ajuste de 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 espaço disponível na linha. A criança 1 é 20dp. Há espaço, então a criança 1 é colocada na linha.

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

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

Há 32dp espaço disponível na linha. A diferença é de 8dp. A criança 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.