FlexBox

Observação: no momento, o FlexBox é uma API experimental e provavelmente vai mudar no futuro. Registre qualquer problema no Issue Tracker.

O FlexBox é um contêiner que organiza itens em uma única direção. Ele pode redimensionar, ajustar, alinhar e distribuir o espaço entre os itens para preencher de maneira ideal o espaço disponível. É um layout útil para itens de tamanhos diferentes e para redimensionar itens quando o espaço disponível muda.

Com o FlexBox, você pode:

• Controlar como os itens aumentam e diminuem para preencher o espaço disponível
• Quebra os itens em novas linhas ou colunas quando não há espaço suficiente para eles
• Distribua o espaço extra entre os itens usando predefinições convenientes

Quando usar o FlexBox

O FlexBox geralmente é usado para mostrar um pequeno número de itens em um layout geral da tela. Para um layout de tela geral, Grid costuma ser uma opção melhor. FlexBox não é compatível com o carregamento lento de itens. Para mostrar um grande número de itens, use listas e grades lentas. Se você precisar ajustar itens, use FlexBox em vez de FlowRow e FlowColumn.

Terminologia e conceitos

Importante: FlexBox é muito influenciado pela especificação de layout de caixa flexível do CSS e tem conceitos, terminologia e comportamento quase idênticos. Se você já conhece display: flex, vai perceber que as propriedades e o comportamento de FlexBox são quase idênticos.

O FlexBox organiza os itens em linhas horizontais ou verticais. Essa direção estabelece o eixo principal. 90 graus em relação ao eixo principal é o eixo cruzado. O comprimento do FlexBox ao longo do eixo principal é conhecido como tamanho principal. O comprimento correspondente do eixo cruzado é conhecido como tamanho cruzado. Esses tamanhos e eixos formam a base do comportamento do FlexBox.

Figura 1. Eixos e tamanhos quando a direção FlexBox é Row.

Figura 2. Eixos e tamanhos quando a direção FlexBox é Column.

Aplicar propriedades

É possível aplicar propriedades FlexBox de duas maneiras:

• Para o contêiner FlexBox usando FlexBox(config)
• Para um item dentro do FlexBox usando Modifier.flex

Propriedades do contêiner (config)

Propriedades do item (Modifier.flex)

direction: a direção do layout do item wrap: se os itens devem ser encapsulados quando o tamanho principal é insuficiente. justifyContent: como distribuir itens ao longo do eixo principal alignItems: como alinhar itens ao longo do eixo cruzado alignContent: como distribuir o espaço extra do tamanho transversal quando há várias linhas. rowGap / columnGap: adiciona espaço entre itens e linhas Consulte Definir o comportamento do contêiner para mais informações sobre essas propriedades.

basis: o tamanho do item antes da distribuição de espaço extra do tamanho principal. grow: a parte do espaço extra do tamanho principal que este item deve receber shrink: a parcela do déficit de espaço do tamanho principal que este item deve receber alignSelf: como distribuir o espaço extra do tamanho transversal para este item. Substitui alignItems. order: controla a ordem do layout Consulte Definir o comportamento do item para mais informações sobre essas propriedades.

Entender o algoritmo de layout FlexBox

Um dos recursos mais avançados do FlexBox é a capacidade de redimensionar os filhos para melhor se adequar ao espaço disponível. Entender como o FlexBox faz isso pode ajudar você a definir propriedades do FlexBox para otimizar a interface em todos os tamanhos possíveis.

O algoritmo de layout do FlexBox funciona da seguinte maneira:

1. Calcular o tamanho base do elemento secundário: use o valor basis do elemento secundário para calcular o tamanho inicial ao longo do eixo principal antes que qualquer espaço extra seja distribuído.

2. Ordenar os filhos: ordene os filhos pelos valores de order, se houver.

3. Crie linhas: para cada filho, verifique se o tamanho inicial dele mais gap cabe no espaço restante na linha atual. Se for o caso, coloque a criança na linha. Caso contrário, coloque em uma nova linha se o ajuste de texto estiver ativado ou coloque o item na linha atual, onde ele vai transbordar (ficando parcialmente oculto pela borda do contêiner).

4. Alinhar ou redimensionar itens no eixo principal: para cada linha, distribua o espaço extra para ou entre os itens redimensionando ou alinhando eles.

5. Alinhar ou redimensionar itens no eixo cruzado: para cada linha, distribua o espaço extra para ou entre itens e linhas esticando ou alinhando.

Agora que você já conhece os conceitos do FlexBox, consulte Começar para criar um FlexBox básico.