Como alinhar elemento no centro com Flexbox

Josias Pereira -

Alinhar elementos no centro é uma tarefa comum em design web, e o Flexbox é uma das maneiras mais eficientes de fazer isso. Neste tutorial, vamos ensinar como alinhar elementos no centro usando o Flexbox.

O Flexbox é uma técnica de layout em CSS3 que permite criar layouts flexíveis e responsivos sem a necessidade de usar floats ou posicionamento absoluto. Ele fornece várias propriedades que facilitam a criação de layouts dinâmicos, incluindo a capacidade de alinhar elementos no centro.

Mão na massa

Vamos começar com um exemplo simples de como alinhar um elemento no centro horizontal usando o Flexbox:

<div class="container">
  <div class="item">
    <p>Este é o conteúdo</p>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
}

.item {
  width: 300px;
}

Entendendo o código

  1. A classe .container é definida com a propriedade display: flex;, que indica que ela é um contêiner flexível. Todas as suas crianças diretas serão itens flexíveis.
  2. A propriedade justify-content: center; é usada para centralizar o item horizontalmente dentro do contêiner.
  3. A classe .item define o elemento que será centralizado. Ela recebe uma largura de 300px, mas isso pode ser ajustado para o que você precisar.

A propriedade justify-content permite alinhar os itens horizontalmente dentro do contêiner flexível. Existem várias opções que podem ser usadas em justify-content, incluindo:

  • flex-start: alinha os itens no início do contêiner.
  • flex-end: alinha os itens no final do contêiner.
  • center: alinha os itens no centro do contêiner.
  • space-between: distribui os itens igualmente ao longo do contêiner, deixando espaços vazios iguais entre os itens.
  • space-around: distribui os itens igualmente ao longo do contêiner, incluindo espaços vazios iguais antes do primeiro item e após o último item.

Concluindo

Viu como é prazeroso sar o flexbox? Conte para mim nos comentários se gostou dessa técnica de alinhamento de elementos.

Se tiver alguma duvida, sinta-se a vontade para me pedir ajuda nos comentários desse post!