FlexBox

FlexBox é um contêiner que organiza itens em uma única direção. Ele pode redimensionar, unir, alinhar e distribuir o espaço entre os itens para preencher o espaço disponível da melhor forma. É 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
• Agrupar itens em novas linhas ou colunas quando não houver espaço suficiente para eles
• Distribua o espaço extra entre os itens usando predefinições convenientes

Quando usar o FlexBox

FlexBox geralmente é usado para mostrar um pequeno número de itens dentro de um layout de tela geral. Para um layout de tela geral, Grid geralmente é uma opção melhor. O FlexBox não oferece suporte ao carregamento lento de itens. Para mostrar um grande número de itens, use listas e grades lentas. Se você precisar unir itens, use FlexBox em vez de FlowRow e FlowColumn.

Terminologia e conceitos

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

Aplicar propriedades

É possível aplicar as 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 serão agrupados se o tamanho principal for insuficiente. justifyContent: como distribuir itens ao longo do eixo principal alignItems: como alinhar itens ao longo do eixo transversal. alignContent: como distribuir o espaço extra do tamanho cruzado 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 que qualquer espaço extra do tamanho principal seja distribuído. grow: a parcela de espaço extra do tamanho principal que esse item precisa receber. shrink: a parcela do déficit de espaço do tamanho principal que esse item deve receber. alignSelf: como distribuir o espaço extra do tamanho cruzado para esse 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 se ajustarem melhor ao espaço disponível. Entender como o FlexBox faz isso pode ajudar você a definir as propriedades de FlexBox para otimizar a interface para todos os tamanhos possíveis.

O algoritmo de layout do FlexBox funciona da seguinte maneira:

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

2. Classificar os filhos: classifique os filhos pelos valores de order, se houver.

3. Criar linhas: para cada filho, verifique se o tamanho inicial mais gap cabem no espaço restante na linha atual. Se sim, coloque essa criança na fila. Caso contrário, coloque-o em uma nova linha se o encapsulamento estiver ativado ou coloque o item na linha atual, onde ele vai transbordar (será parcialmente obscurecido 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-os.

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

Agora que você conhece os conceitos do FlexBox, consulte Primeiros passos para criar um FlexBox básico.