Flexbox: Alinhamento individual com Align-Items e Align-Self

Neste tutorial, você aprenderá como usar as propriedades align-items e align-self da Flexbox em CSS para controlar o alinhamento de elementos individuais em um Flex-Container. Enquanto align-items define o alinhamento de todos os filhos diretos de um contêiner, align-self permite fazer configurações diferenciadas para cada elemento filho. Vamos abordar os conceitos passo a passo para que você saiba exatamente como utilizar essas propriedades de forma eficaz no final.

Principais Conclusões

• align-items define o alinhamento de todos os filhos de um Flex-Container.
• align-self permite o alinhamento individual de elementos Flex dentro do contêiner.
• Stretch é o valor padrão para align-items e faz com que os filhos ocupem todo o espaço disponível.

Guia Passo a Passo

Primeiro, vamos ver como é a configuração básica do Flex-Container e como influenciar o alinhamento dos filhos usando align-items.

Aqui, você define um contêiner com display: flex;. Neste contêiner, você pode ajustar o alinhamento usando align-items, por exemplo, em stretch, o que significa que os filhos serão esticados na altura ou largura total do contêiner.

Você pode usar diferentes valores para align-items, incluindo flex-start, center e flex-end. Ao definir align-items como stretch, você verá que todos os elementos filhos preenchem todo o espaço do contêiner. Para demonstrar isso, removeremos uma largura fixa dos elementos filhos, para que ocupem todo o espaço.

Agora, suponha que você defina align-items como center. De repente, perceberá que os elementos não ocupam mais todo o espaço, mas mantêm apenas a largura mínima necessária. Isso demonstra a importância do valor correto de align-items para obter o layout desejado.

Ao adicionar novamente uma largura fixa, como 200px, você verá que os elementos ficam mais largos e o layout fica estável. Você também pode usar width: 100% para obter um efeito semelhante.

Agora chegamos ao cerne do nosso tutorial: lidar com align-self. Esta propriedade CSS permite ajustar o alinhamento individual de cada elemento filho, independentemente da configuração do contêiner pai. Portanto, definimos align-items como center e adicionamos configurações específicas para align-self em seguida.

Para o elemento de navegação, queremos que ele seja alinhado totalmente à esquerda. Defina align-self: flex-start para a navegação e salve suas alterações. Você poderá observar que o elemento de navegação se move totalmente para a esquerda.

Para o elemento principal (main), definimos align-self: center. Ele deve permanecer no meio, evidenciando a distância em relação aos outros elementos.

Agora alinhamos a área do rodapé (footer) com align-self: flex-end para baixo. Todas essas configurações combinadas criam uma linha diagonal da esquerda para cima para a direita para baixo em seu layout.

Ao definir align-self como stretch para o elemento principal, ele ocupará todo o espaço no eixo transversal, fazendo com que os outros elementos colapsem em altura.

Da mesma forma, você pode alterar a direção configurando flex-direction: row para o contêiner. O procedimento para alinhar os elementos individuais permanece o mesmo, apenas o eixo é alterado. Começamos com flex-start e deixamos os elementos se alinharem de acordo com o princípio do stretch.

Um ponto importante é que você pode usar align-self quantas vezes desejar para dar a cada elemento um alinhamento individual, mantendo o controle total sobre o layout do contêiner e de seus filhos.

Ao aplicar as propriedades da Flexbox de forma direcionada, é possível criar um layout visualmente atraente que também é otimizado para diferentes tamanhos de tela.

Resumo

Neste tutorial, abordamos de forma detalhada as propriedades align-items e align-self da Flexbox. Você aprendeu como ajustar o alinhamento de elementos em um Flex-Container, tanto de forma geral através do contêiner quanto individualmente para cada elemento.