Como usar Flex para alinhar elementos HTML

Você pode criar layouts da web mais poderosos e confiáveis usando CSS flexbox. Até mesmo o básico oferece bastante controle ao organizar os itens na página.

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

Este artigo explicará como você pode usar certas propriedades flexíveis. Isso inclui as propriedades flex-direction, justificar-content, alinhar-self, alinhar-itens, alinhar-conteúdo e lacuna.

Como configurar a exibição CSS Flex

Um exemplo de estrutura que você pode usar para explorar os fundamentos do flexbox é um conjunto de divs filhos abaixo de um único div pai. No código abaixo, existe uma div "pai" principal. Os três divs filhos representam itens que você pode alinhar usando propriedades flexíveis.

<div class="parent">
    <div class="child-item"></div>
    <div class="child-item"></div>
    <div class="child-item"></div>
</div>

Para que qualquer estilo flexível funcione, você precisará adicionar a propriedade display: flex ao contêiner flex pai.

.parent {
  display: flex;
}

Sem flex, os divs filhos são exibidos um após o outro em uma formação de colunas na página.

Para ver um exemplo dessa configuração, visualize e execute o código neste snippet CodePen.

Como controlar a direção do layout

A propriedade flex-direction determina a direção da linha ou coluna dos itens filhos.

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

flex-direction: row | column | row-reverse | column-reverse

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

HTML:

<div class="parent">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

CSS:

.red { background-color:red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green;}
.blue { background-color: blue; }
.purple { background-color: purple; }

.parent div {
 width: 40px;
 height: 40px;
}

Aplique a propriedade flex-direction ao flex container pai. Isso alinhará os itens div filhos.

.parent {
 width: 300px;
 display: flex; 
 flex-direction: row;
}

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

Como alinhar itens ao longo do eixo transversal

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

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

align-items: flex-start | flex-end | align-items | stretch

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

.parent {
  display: flex; 
  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 onde a linha de base começa, como na parte superior (primeira linha de base) ou na parte inferior (última linha de base).

align-items: baseline | first baseline | last baseline;

Para que o alinhamento de itens: linha de base funcione, certifique-se de que cada item tenha uma altura ou largura diferente (dependendo do eixo que você está usando).

<div class="parent">
  <div class="red" style="height:20px"></div>
  <div class="orange" style="height:60px"></div>
  <div class="yellow" style="height:30px"></div>
  <div class="green" style="height:90px"></div>
  <div class="blue" style="height:30px"></div>
  <div class="purple" style="height:50px"></div>
</div>

Como substituir o alinhamento em itens individuais

Você pode usar a propriedade align-self para substituir qualquer estilo de alinhamento de itens 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 | flex-start | flex-end | center | baseline | stretch

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

.parent {
  display: flex; 
  flex-direction: row;
}

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

<div class="parent">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green" style="align-self:center"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

Como distribuir linhas ao longo do eixo transversal

A propriedade align-content alinha os filhos ao longo do eixo vertical. 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 | flex-end | center | stretch | space-between | space-around

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

.parent {
  flex-wrap: wrap;
  display: flex;
  align-content: flex-start;
  width: 180px;
}

Como alinhar itens no eixo principal

A propriedade justify-content adiciona alinhamento à direita, à esquerda ou ao centro aos itens filhos. Também distribui os itens adicionando espaços entre eles ao justificar o conteúdo.

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

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Envolva os itens que deseja alinhar em um flex container pai.

HTML:

<div class="parent">
 <div class="red"></div>
 <div class="green"></div>
 <div class="blue"></div>
</div>

CSS:

.red { background-color: red; }
.green { background-color: lightgreen; }
.blue { background-color: blue; }

Adicione a propriedade justificar-content ao flex container pai.

.parent {
 width: 300px;
 display: flex; 
 justify-content: flex-start;
}

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

A propriedade justificar-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 perda de dados, caso você centralize uma palavra longa. Usar a palavra-chave segura evita que um div mais curto corte a primeira e a última letras.

.parent {
 display: flex; 
 justify-content: safe center;
}

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

Como adicionar espaçamento entre itens

A propriedade gap permite adicionar uma quantidade de espaço entre os itens. É um dos recursos CSS mais recentes que pode ajudá-lo a construir um layout responsivo.

Aplique a propriedade gap ao flex container pai.

.parent {
  display: flex;
  gap: 70px;
}

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

.parent { 
    width: 300px;
    gap: 120px;
}

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

.parent { 
    width: 300px;
    flex-wrap: wrap;
    gap: 120px;
}

Além disso, você também pode definir as propriedades row-gap e column-gap. Novamente, você precisará aplicá-los ao flex container pai.

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

.parent { 
    row-gap: 120px; 
}
.parent { 
    column-gap: 120px; 
}

Usando mais propriedades Flex em seu site

Esperamos que agora você esteja familiarizado com as várias propriedades flexíveis que pode usar para alinhar itens em sua página da web. Isso inclui como você pode usar as propriedades flex-direction, justificar-content, alinhar-self, alinhar itens, alinhar-conteúdo e lacuna.

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 limpa e ferramentas usadas para otimização CSS.