CSS Flexbox - Um Guia Interativo (Parte 1 - Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o Flexbox. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o Flexbox funciona.

Se estiver com dúvidas entre usar Flexbox ou CSS Grid, confira o nosso post de comparação: https://www.treinaweb.com.br/blog/flexbox-ou-css-grid/

Curso Crystal - Metodologia ágil

Conhecer o curso

O que é Flexbox?

O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).

Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container. Teremos basicamente um container com três itens dentro.

<div class="container" >
	<div class="item" ></div>
	<div class="item" ></div>
	<div class="item" ></div>
</div>

display

Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”. No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.

flex-direction

Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).

• row (padrão): da esquerda para direita
• row-reverse: inverso de row
• column: de cima para baixo
• column-reverse: inverso de column

flex-wrap

O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.

Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.

• nowrap (padrão): todos os itens ficam em uma única linha
• wrap: os itens que não cabem na linha são jogados para baixo
• wrap-reverse: os itens que não cabem na linha são jogados para cima

flex-flow

Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.

.container{
	display: flex;
	flex-flow: row wrap;
}

justify-content

Define o alinhamento dos itens ao longo do eixo principal.

• flex-start (padrão): os itens ficam junto no começo da linha
• flex-end: os itens ficam juntos no final da linha
• center: os itens ficam centralizados na linha
• space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
• space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
• space-evenly: os itens são distribuídos igualmente no espaço disponível.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-items

Define o alinhamento dos itens perpendicularmente em relação ao eixo principal. Pense nele como um justify-content, mas que alinhará os itens no outro eixo.

• stretch (padrão): estica os elementos para preencherem o container.
• flex-start: os itens ficam junto no começo do eixo perpendicular
• flex-end: os itens ficam juntos no final do eixo perpendicular
• center: os itens ficam centralizados no eixo perpendicular
• baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-content

Alinha as linhas do container. Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.

• stretch (padrão): estica as linhas para preencherem o espaço restante.
• flex-start: as linhas ficam juntas no começo do container
• flex-end: as linhas ficam juntas no final do container
• center: as linhas ficam centralizadas no container
• space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
• space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

Curso Python - Collections

Conhecer o curso

Playground

Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades: