Como usar o Flex para alinhar elementos HTML

As propriedades flex em CSS permitem alinhar itens de forma mais flexível e responsiva. Isso o torna útil quando você deseja que seus elementos HTML sejam mais responsivos dentro do navegador da web.

Este artigo mostrará como você pode usar certas propriedades flex. Isso inclui as propriedades flex-direction, justify-content, align-self, align-items, align-content e gap.

Como configurar a exibição CSS Flex

Uma estrutura de exemplo que você pode usar para explorar o básico do flexbox é um conjunto de divs filho abaixo de um div pai único. No código abaixo, há uma div "pai" principal. As três divs filhas representam itens que você pode alinhar usando propriedades flex.

Para que qualquer estilo flexível funcione, você precisará adicionar o exibição: flexível propriedade para o contêiner flex pai.

.parent {
 exibição: flexível;
}

Sem flex, as divs filhas são exibidas uma após a outra em uma formação de coluna na página.

Para ver um exemplo desta configuração, veja e execute o código neste Fragmento de CodePen.

Como controlar a direção do layout

o direção flexível A propriedade determina a direção da linha ou coluna dos itens filho.

As opções para a propriedade flex-direction incluem:

direção flexível: linha | coluna | linha inversa | coluna inversa

Você precisará adicionar um contêiner pai ao redor dos itens que deseja alinhar.

HTML:

CSS:

.red { cor de fundo: vermelho; }
.laranja { cor de fundo: laranja; }
.yellow { cor de fundo: amarelo; }
.green { cor de fundo: verde;}
.blue { cor de fundo: azul; }
.purple { cor de fundo: roxo; }
.pai div {
 largura: 40px;
 altura: 40px;
}

Aplique a propriedade flex-direction ao contêiner flex pai. Isso alinhará os itens div filho.

.parent {
 largura: 300px;
 exibição: flexível; 
 direção flexível: linha;
}

Muitas propriedades flex referem-se ao conceito do eixo principal e do eixo transversal. Quando a direção flexível é fileira, o eixo principal representa a direção horizontal e o eixo transversal representa a vertical. Um valor de coluna alterna esses eixos.

Veja o código para a propriedade flex-direction neste Fragmento de CodePen para ver alguns exemplos.

Como alinhar itens ao longo do eixo cruzado

o itens de alinhamento A propriedade controla o alinhamento de itens ao longo do eixo cruzado. Para a direção flexível padrão, row, align-items controla o alinhamento vertical dos itens.

As opções para a propriedade align-items incluem:

align-items: flex-start | extremidade flexível | alinhar-itens | esticar

Adicione a propriedade align-items ao contêiner pai para alinhar seus filhos.

.parent {
 exibição: flexível; 
 align-items: flex-start;
}

Além disso, você pode optar por alinhar os itens usando uma linha de base. Por padrão, a opção de linha de base alinha todos os itens com base na base dos itens.

Você também pode escolher de onde a linha de base começa, como a parte superior (primeira linha de base) ou inferior (última linha de base).

align-items: linha de base | primeira linha de base | última linha de base;

Para align-items: baseline para funcionar, certifique-se de que cada item tenha uma altura ou largura diferente (dependendo do eixo que você está usando).

​​​

Veja o código para a propriedade align-items neste Fragmento de CodePen para ver alguns exemplos.

Como substituir o alinhamento em itens individuais

Você pode usar o alinhar-se para substituir qualquer estilo de itens de alinhamento do contêiner pai. Isso significa que você pode definir um alinhamento flexível separado em um item individual.

As opções para a propriedade align-self incluem:

align-self: auto | início flexível | extremidade flexível | centro | linha de base | esticar

Digamos, por exemplo, que o contêiner pai tenha um estilo de direção flexível definido como "linha".

.parent {
 exibição: flexível; 
 direção flexível: linha;
}

Você pode aplicar a propriedade align-self no item individual. O item individual usará o estilo da propriedade align-self e centralizará o item no contêiner pai.

Veja o código para a propriedade align-self neste Fragmento de CodePen para ver alguns exemplos.

Como distribuir linhas ao longo do eixo cruzado

o alinhar-conteúdo A propriedade alinha os filhos ao longo do eixo vertical. Ele também pode determinar o espaçamento entre itens que estão em várias linhas.

As opções para a propriedade align-content incluem:

align-content: flex-start | extremidade flexível | centro | esticar | espaço entre | espaço ao redor

Adicione a propriedade align-content ao contêiner flex pai. A propriedade align-content só funcionará se a propriedade flex-wrap estiver definida. Adicione flex-wrap: wrap ao container pai e reduza a largura do div pai para forçar os itens em mais de uma linha.

.parent {
 flex-wrap: embrulhar;
 exibição: flexível;
 align-content: flex-start;
 largura: 180px;
}

Veja o código para a propriedade align-content neste Fragmento de CodePen para ver alguns exemplos.

Como alinhar itens no eixo principal

o justificar-conteúdo adiciona alinhamento à direita, à esquerda ou ao centro aos itens filho. Ele também espalha os itens adicionando espaços entre eles ao justificar o conteúdo.

As opções para a propriedade justify-content incluem:

justificar-conteúdo: flex-start | extremidade flexível | centro | espaço entre | espaço ao redor | espaçar uniformemente

Enrole os itens que você deseja alinhar em um contêiner flex pai.

HTML:

CSS:

.red { cor de fundo: vermelho; }
.green { cor de fundo: verde claro; }
.blue { cor de fundo: azul; }

Adicione a propriedade justify-content ao contêiner flex pai.

.parent {
 largura: 300px;
 exibição: flexível; 
 justificar-conteúdo: flex-start;
}

A propriedade justify-content também suporta valores listados na especificação CSS Box Alignment. Isso inclui valores como "início", "fim", "esquerda" e "direita". Alguns navegadores não os suportam.

A propriedade justify-content também possui uma palavra-chave "segura" que você pode usar. Isso garante que os elementos tentem permanecer dentro do intervalo do contêiner pai.

Também é usado para evitar a perda de dados, caso você centralize uma palavra longa. Usar a palavra-chave safe evita que um div mais curto corte a primeira e a última letras.

.parent {
 exibição: flexível; 
 justificar-conteúdo: centro seguro;
}

A palavra-chave safe também está limitada a determinados navegadores. Você pode verificar a compatibilidade em Eu posso usar.

Veja o código para a propriedade justify-content neste Fragmento de CodePen para ver alguns exemplos.

Como adicionar espaçamento entre itens

o Gap = Vão A propriedade permite adicionar uma quantidade de espaço entre os itens. É um dos recursos CSS mais recentes que podem ajudá-lo a criar um layout responsivo.

Aplique a propriedade gap ao contêiner flex pai.

.parent {
 exibição: flexível;
 intervalo: 70px;
}

Se você adicionar uma lacuna que force o comprimento dos itens a exceder a largura do pai, os itens serão reduzidos para tentar caber dentro da linha.

.parent { 
 largura: 300px;
 intervalo: 120px;
}

Se você usar flex-wrap: wrap para empurrar os itens para uma nova linha, a quantidade de espaço também será aplicada ao espaço entre as linhas.

.parent { 
 largura: 300px;
 flex-wrap: embrulhar;
 intervalo: 120px;
}

Além disso, você também pode definir o lacuna de linha e lacuna de coluna propriedades. Novamente, você precisará aplicá-los ao contêiner flex pai.

A propriedade row-gap determina o espaço entre cada linha. A propriedade column-gap determina o espaço entre cada coluna.

.parent { 
 intervalo de linha: 120px; 
}
.parent { 
 intervalo de coluna: 120px; 
}

Veja o código para a propriedade gap neste Fragmento de CodePen para ver alguns exemplos.

Usando mais propriedades flexíveis em seu site

Espero que agora você esteja familiarizado com as várias propriedades flex que você pode usar para alinhar itens em sua página da web. Isso inclui como você pode usar as propriedades flex-direction, justify-content, align-self, align-items, align-content e gap.

Flexbox é uma técnica de layout poderosa, mas é apenas uma pequena parte do CSS. Você também pode aprender sobre novas propriedades CSS, técnicas de codificação limpas e ferramentas usadas para otimização CSS.

11 ferramentas úteis para verificar, limpar e otimizar arquivos CSS

Leia a seguir

Sobre o autor