Layout de caixa flexível: Como distribuir elementos filhos de forma equitativa

Flexbox é um módulo de layout poderoso em CSS que ajuda a aproveitar eficientemente o espaço disponível dentro de um contêiner. Neste tutorial, você aprenderá como distribuir igualmente os elementos filhos em um contêiner flexível. Isso é especialmente útil para designs responsivos, nos quais a largura da janela pode mudar. Vamos começar!

Conclusões Principais

• Com o Flexbox, os elementos filhos no layout podem ser distribuídos igualmente ajustando os valores Flex dos elementos conforme necessário.
• Você pode tornar a largura e altura dos elementos filhos flexíveis, de modo que se ajustem automaticamente ao espaço disponível sem precisar usar medidas fixas.

Guia Passo a Passo

Para entender como distribuir igualmente os elementos filhos em um contêiner flexível, siga estes passos:

Primeiro, crie um contêiner flexível aplicando a propriedade CSS display: flex;. Aqui está um exemplo simples de como fazer isso. Certifique-se de que o contêiner esteja alinhado no formato de linha:

Nesse estado, o espaço é distribuído igualmente entre todos os elementos filhos, desde que esses elementos filhos não tenham larguras fixas. Se você definir a largura dos elementos filhos e então a configurar para 100 pixels, eles serão distribuídos uniformemente no contêiner, porém isso não é ideal para um design responsivo:

Se você remover as larguras fixas, você verá rapidamente que o espaço é drasticamente reduzido, especialmente quando o texto nos elementos filhos estiver ausente. Nesse caso, tudo colapsa para a largura mínima definida pelo texto:

Para distribuir o espaço disponível de forma uniforme, é preciso configurar o valor Flex para os elementos filhos. Isso pode ser facilmente feito aplicando a propriedade flex, que permite definir uma proporção do espaço disponível. Configura o valor flex de cada elemento filho como 1:

Depois de fazer isso, você verá que todos os elementos filhos distribuíram uniformemente o espaço. Esta é uma solução muito flexível, pois se ajusta dinamicamente à largura do contêiner.

Você também pode variar os valores Flex para criar proporções diferentes. Por exemplo, se o primeiro elemento deve receber metade do espaço, você poderia defini-lo como flex: 2; enquanto os outros elementos permanecem como flex: 1;:

Após ajustar os valores, os elementos filhos serão distribuídos de acordo com os valores configurados. Devido às proporções flexíveis atribuídas, o primeiro elemento terá mais espaço do que os outros:

Ao alterar a largura do contêiner, as proporções permanecem estáveis. Se você alterar a largura para 800 pixels ou 400 pixels, os elementos filhos se ajustarão automaticamente e distribuirão o espaço igualmente com base nos valores Flex pré-definidos anteriormente:

Você também pode ajustar facilmente as propriedades do Flexbox alterando a propriedade flex-direction. Por exemplo, ao alterar o contêiner flex de linha para coluna, a lógica de distribuição permanece a mesma. Os elementos filhos serão então dispostos verticalmente:

Garanta que a altura dos elementos filhos não esteja definida para manter a flexibilidade. Isso funciona especialmente bem para designs responsivos, pois os elementos filhos se adaptam de acordo com o tamanho e orientação da tela:

Dessa forma, você pode criar um layout altamente responsivo, garantindo que seu design fique ótimo tanto na visualização desktop quanto móvel.

Resumo

Neste tutorial, você aprendeu como usar o Flexbox em CSS e HTML para distribuir uniformemente os elementos filhos. Graças às propriedades flexíveis, você pode criar layouts responsivos que se ajustam perfeitamente a diferentes tamanhos e formatos de tela.