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 automática, o alinhamento e os espaços entre os itens.

Direção do layout

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

• Row (padrão): define o eixo principal como horizontal. Em localidades da esquerda para a direita, isso será da esquerda para a direita, com o oposto 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 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 transversal e distribuir espaço extra entre as linhas. 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

O encapsulamento 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 quebra de linha usando wrap.

Valor de FlexWrap	Exemplo usando a direção Row
NoWrap (padrão): impede que os itens sejam agrupados. Os itens transbordam se o tamanho principal for insuficiente.
Wrap: quando não há espaço suficiente para um item (mais qualquer espaço), 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, mas 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 encapsulamento FlexBox funciona. O contêiner FlexBox tem um tamanho principal de 100dp, com wrap definido como FlexWrap.Wrap e um espaçamento de 8dp. Ele contém três itens com basis 20dp, 40dp e 50dp, respectivamente.

Há 100dp de espaço disponível na linha. A criança 1 é 20dp. Como há espaço, o Filho 1 é colocado na linha.

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

Há 32dp espaço disponível na linha. A lacuna é 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.

Adicionar intervalos entre os itens

Adicione espaços entre linhas e colunas usando rowGap e columnGap. Isso é útil para evitar a adição de modificadores de espaçamento aos filhos.

rowGap adiciona espaço vertical entre itens e linhas.	columnGap adiciona espaço horizontal entre itens e linhas.	gap é uma função de conveniência que adiciona columnGap e rowGap.