Flexbox

O Flexbox é um dos recursos mais poderosos do CSS para organizar elementos. Ele funciona de forma simples, mas muito eficaz: quando você aplica a propriedade display: flex em um elemento, ele se torna um contêiner flexível. A partir daí, todos os filhos diretos dentro dele passam a ser itens flexíveis, e você pode controlá-los com um conjunto de novas propriedades.

 Propriedades do Contêiner Flex (as mais importantes!)

Flex-direction: Define a direção dos itens, como se fosse um eixo principal.

• row (padrão): Os itens ficam lado a lado, da esquerda para a direita.

• column: Os itens ficam um embaixo do outro, de cima para baixo.

• row-reverse: Os itens ficam em linha, mas na ordem inversa.

• column-reverse: Os itens ficam em coluna, mas na ordem inversa.

Justify-content: Alinha os itens no eixo principal (horizontal ou vertical, dependendo do flex-direction).

• flex-start (padrão): Agrupa os itens no início.

• center: Centraliza os itens.

• flex-end: Agrupa os itens no final.

• space-between: O primeiro item vai para a esquerda, o último para a direita, e o espaço é distribuído entre eles.

• space-around: Distribui espaço ao redor de cada item.

• space-evenly: Distribui espaço igual entre todos os itens, incluindo as bordas.

Align-items: Alinha os itens no eixo cruzado, que é perpendicular ao principal.

• stretch (padrão): Itens se esticam para ocupar toda a altura.

• flex-start: Alinha os itens no topo.

• center: Centraliza os itens verticalmente.

• flex-end: Alinha os itens na parte de baixo.

• baseline: Alinha os itens pela linha de base do texto.

Gap: Define o espaçamento entre os itens, sem precisar usar margin.

• • Exemplo: gap: 20px;

Propriedades do Contêiner Flex (para layouts mais avançados)

Flex-wrap: Controla se os itens devem quebrar para uma nova linha quando não houver espaço.

• nowrap (padrão): Os itens permanecem em uma única linha, podendo "vazar" do contêiner.

• wrap: Permite que os itens quebrem para a linha de baixo.

Align-content: Funciona quando há mais de uma linha de itens (usando flex-wrap). Controla o alinhamento de todas as linhas juntas.

• flex-start: Todas as linhas grudadas no topo.

• center: Todas as linhas agrupadas no centro.

• space-between: A primeira linha no topo e a última na base, com as outras distribuídas entre elas.

Propriedades dos Itens Flex (dentro do contêiner)

Flex-grow: Define o quanto o item pode crescer para ocupar o espaço livre. O valor padrão é 0.

flex-grow: 1; faz o item preencher todo o espaço disponível.

Flex-shrink: Define o quanto o item pode encolher quando não há espaço. O valor padrão é 1.

flex-shrink: 0; impede o item de encolher.

Flex-basis: Define o tamanho inicial do item antes de ele crescer ou encolher.

flex-basis: 200px;

Flex: É um atalho para as três propriedades acima: flex: flex-grow flex-shrink flex-basis;.

Exemplo: flex: 1 1 200px;

Align-self: Permite alinhar um único item, ignorando o align-items do contêiner.

Exemplo: align-self: flex-end; (alinha apenas este item na parte de baixo).

Exemplo Completo: Usando Flexbox na prática

Aqui está um exemplo completo que você pode usar para demonstrar como as propriedades funcionam juntas.

HTML:

<div class="container">

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

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

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

</div>

CSS:

.container {

  display: flex;

  flex-direction: row;

  justify-content: space-evenly;

  align-items: center;

  flex-wrap: wrap;

  gap: 15px;

  height: 200px;

  background: #f2f2f2;

}

.item {

  flex: 1 1 100px;

  background: #4caf50;

  color: white;

  text-align: center;

  padding: 20px;

  border-radius: 8px;

}