Neste guia, você aprenderá como alinhar os elementos em um contêiner flexível ao longo do eixo principal. Já abordamos o alinhamento ao longo do eixo transversal, mas o eixo principal também é importante. A tecnologia Flexbox oferece várias maneiras de tornar flexível e ajustável o alinhamento dos seus elementos. Vamos dar uma olhada mais de perto!
Principais conclusões
- O alinhamento no eixo principal é feito com a propriedade justify-content.
- Você pode usar diferentes valores, como center, flex-start, flex-end, space-between e space-around, para ajustar o seu layout.
- As configurações do Flexbox afetam diretamente o posicionamento dos elementos na direção desejada.
Guia passo a passo
1. Inicialize o Contêiner Flexível
Comece criando um contêiner flexível e definindo a sua direção flexível. Neste exemplo, definimos a direção flexível como linha (row). Isso significa que os elementos serão organizados em uma linha da esquerda para a direita.
2. Alinhamento padrão dos Elementos
Se você adicionar seus elementos ao contêiner sem ajustes de estilo específicos, verá que eles são alinhados por padrão no início do contêiner. Você pode atribuir a eles uma largura de 100 pixels para ilustrá-los.
3. Alinhamento Centralizado
Para centralizar os elementos, utilize a propriedade CSS justify-content com o valor center. Isso fará com que seus elementos sejam alinhados no centro do contêiner, proporcionando uma disposição visualmente agradável.
4. Alinhar Elementos no Fim
Caso queira alinhar seus elementos no final do contêiner, você pode utilizar o valor flex-end para justify-content. Isso moverá os elementos para a extremidade direita do seu contêiner.
5. Alinhar Elementos no Início
O comportamento padrão, sem ajustes, é flex-start, o que mantém os elementos no início do contêiner. Essa configuração é útil para obter uma disposição clara e organizada dos elementos na parte superior do contêiner.
6. Alterar Direção Flexível
Ao alterar a direção flexível para coluna (column), a principal muda de horizontal para vertical. Com isso, os elementos são agora organizados de cima para baixo.
7. Centralizar Elementos em uma Orientação Vertical
Você também pode centralizar os elementos nessa nova orientação, usando justify-content: center. Essa configuração garante que todos os elementos sejam exibidos no centro do contêiner.
8. Alinhamento na Extremidade Inferior
Se deseja que os elementos estejam na parte inferior do contêiner, pode novamente configurar para flex-end. Isso posicionará os elementos na borda inferior do contêiner.
9. Utilizando as Propriedades de Espaçamento
O Flexbox também permite controlar o espaço entre seus elementos usando space-between, space-around e space-evenly. Essas propriedades distribuem o espaço disponível de diferentes maneiras.
10. Utilizando o Space-Between
Com justify-content: space-between, o primeiro elemento ficará no topo e o último no final do contêiner, com o espaço entre os elementos distribuído de forma uniforme.
11. Experimente com space-around
Ao usar space-around, é criado o mesmo espaço ao redor de cada elemento. Esta distância é visível no centro do contêiner, enquanto os elementos permanecem distribuídos uniformemente.
12. Utilize Space-Evenly
Ao usar o space-evenly, garante-se que haja espaço mais uniforme entre os elementos e a borda do contêiner.
Resumo
Neste tutorial, aprendeu como ajustar o alinhamento no eixo principal com Flexbox. Ao usar justify-content, você pode tornar a posição dos seus elementos muito flexível. Também aprendeu várias propriedades que ajudam a obter um layout desejado. Utilize esses conhecimentos para criar designs apelativos e fáceis de usar!
Perguntas Frequentes
O que é Flexbox?Flexbox é um módulo de layout CSS que permite posicionar os elementos dentro de um contêiner de forma flexível.
Como funciona o justify-content?A propriedade justify-content determina como o espaço disponível entre e ao redredor dos elementos no contêiner flex é distribuído.
Quais direções Flex posso usar? Você pode usar row, row-reverse, column e column-reverse para controlar a disposição dos elementos no contêiner.
Qual a diferença entre space-between e space-around?space-between coloca os primeiros e últimos elementos nas bordas do contêiner, enquanto space-around cria espaço uniforme ao redor de cada elemento.
