FlexBox

FlexBox é um contêiner que organiza itens em uma única direção. Ele pode redimensionar, ajustar, alinhar e distribuir espaço entre os itens para preencher o espaço disponível da melhor maneira. É 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
• Ajustar os itens em novas linhas ou colunas quando não houver espaço suficiente para eles
• Distribuir 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 de tela geral. Para um layout de tela geral, o 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 ajustar itens, use FlexBox em vez de FlowRow e FlowColumn.

Terminologia e conceitos

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

Aplicar propriedades

É possível aplicar propriedades do FlexBox de duas maneiras:

• Ao contêiner FlexBox usando FlexBox(config)
• A 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 ajustados quando o tamanho principal for insuficiente justifyContent - como distribuir itens ao longo do eixo principal alignItems - como alinhar itens ao longo do eixo cruzado alignContent - como distribuir 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 - `basis`: o tamanho do item antes que qualquer espaço extra do tamanho principal seja distribuído grow - a parte do espaço extra do tamanho principal que esse item deve receber shrink - a parte do déficit de espaço do tamanho principal que esse item deve receber alignSelf - como distribuir 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 do 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 as propriedades do 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 filho: use o valor basis do filho para calcular o tamanho inicial ao longo do eixo principal antes que qualquer espaço extra seja distribuído.

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

3. Criar linhas: para cada filho, verifique se o tamanho inicial mais gap vai caber no espaço restante na linha atual. Se for o caso, coloque essa criança ou adolescente na linha. Caso contrário, coloque-o em uma nova linha se o ajuste estiver ativadoou coloque o item na linha atual onde ele vai transbordar (ele será parcialmente obscurecido pela borda do contêiner).

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

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

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