Display Flex: Domine a arte do Alinhamento em CSS

O que é display Flex e sua importância

O display flex no CSS é uma maneira de organizar elementos em uma página da web. Imagine uma caixa grande chamada "contêiner", onde você pode colocar várias caixinhas menores. Com o display flex, você pode arrumar essas caixinhas de forma organizada, deixando elas se ajustarem sozinhas dentro do contêiner. Isso é importante porque ajuda a criar páginas que ficam bonitas e funcionam bem em diferentes tamanhos de tela, como em celulares e computadores.

Exemplos com os Principais Display Flex

• flex-direction: Decide se os elementos vão em fila (row) ou coluna (column)

Exemplo 1: Fila Horizontal (row)Imagina que você tem três caixas e quer que elas fiquem lado a lado, como se fossem livros na prateleira. Você pode usar flex-direction: row para isso.

<div class="container">
 <div class="item">Caixa 1</div>
 <div class="item">Caixa 2</div>
 <div class="item">Caixa 3</div>
</div>

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

Aqui, os itens ficam em uma fila horizontal, como livros numa estante.

Exemplo 2: Coluna Vertical (column)Agora, imagina que você quer empilhar as caixas uma em cima da outra, como uma torre de blocos. Para isso, usamos flex-direction: column.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

.container {
display: flex;
flex-direction: column;
}

Os itens ficam empilhados, um em cima do outro, como blocos formando uma torre.

Exemplo 3: Fila Horizontal Invertida (row-reverse)

E se você quiser que os itens apareçam em uma fila horizontal, mas na ordem inversa? Aí usamos flex-direction: row-reverse.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

.container {
display: flex;
flex-direction: row-reverse;
}

Aqui, as caixas ficam lado a lado, mas a ordem é invertida. A "Caixa 3" vem primeiro, depois "Caixa 2" e por último a "Caixa 1".

• justify-content: Alinha os elementos no começo (flex-start), no meio (center), ou no final (flex-end)

Exemplo 1: Alinhamento no Começo (flex-start)

Imagine que você tem três caixas e quer que elas fiquem alinhadas à esquerda da tela, como se estivessem todas apertadinhas em um canto. Você pode usar justify-content: flex-start para isso.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

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

Aqui, as caixas são alinhadas no começo, ou seja, à esquerda, como se estivessem todas encostadas na borda.

Exemplo 2: Alinhamento no Meio (center)

Agora, se você quer que as caixas fiquem bem no centro da tela, como se estivessem numa fila , use justify-content: center.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

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

Os itens ficam bem no meio, como se estivessem todos alinhados .

Exemplo 3: Alinhamento no Final (flex-end)

E se você quiser que as caixas fiquem todas alinhadas à direita, como se estivessem encostadas na outra borda? Para isso, usamos justify-content: flex-end.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

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

Aqui, as caixas são alinhadas no final, ou seja, à direita, como se estivessem todas encostadas na borda do lado oposto.

• align-items: Alinha os elementos no eixo transversal, como se fosse uma fila.

Exemplo 1: Alinhamento no Começo (flex-start) Imagine que você tem três caixas e quer que todas fiquem alinhadas no topo. Você pode usar align-items: flex-start para isso.

<div class="container">
 <div class="item">Caixa 1</div>
 <div class="item">Caixa 2</div>
 <div class="item">Caixa 3</div>
</div>

.container {
 display: flex;
 align-items: flex-start;
}

Aqui, as caixas são alinhadas no topo do contêiner.

Exemplo 2: Alinhamento no Centro (center)

Agora, se você quer que as caixas fiquem todas alinhadas bem no meio, use align-items: center.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

.container {
display: flex;
align-items: center;
}

As caixas ficam todas alinhadas no centro verticalmente.

Exemplo 3: Alinhamento no Final (flex-end)

E se você quiser que as caixas fiquem todas alinhadas na parte de baixo.

Para isso, usamos align-items: flex-end.

<div class="container">
<div class="item">Caixa 1</div>
<div class="item">Caixa 2</div>
<div class="item">Caixa 3</div>
</div>

.container {
display: flex;
align-items: flex-end;
}

Aqui, as caixas são alinhadas no fundo do contêiner, encostadas na borda.

Gostou das dicas?Aqui só estão algumas propriedades para deixar sua página web com elementos alinhados,existem muitos outros, espero que este artigo te ajude ,pois alinhamento de elementos foi minha dúvida no começo,assim como é pra quem começa no mundo front -end.

Siga-me nas redes sociais para mais conteúdos

LinkedIn https: //www.linkedin.com/in/denizesancheslopes

GitHub: //https://github.com/sanches-collab

Ilustrações de capa: Gerada pela léxica.art

Conteúdo: Gerado por chatgpt e revisão humana