Dominando o Flexbox em CSS

O Flexbox (Flexible Box Layout) é um modelo de layout CSS que permite criar estruturas responsivas e flexíveis sem usar float ou posicionamento. É uma ferramenta poderosa para alinhar e distribuir o espaço entre os elementos dentro de um contêiner.

Conceitos básicos

O Flexbox funciona com dois tipos de elementos:

• O contêiner flex (pai)
• Os itens flex (filhos)

Criando um contêiner flex

Para criar um contêiner flex, use a propriedade display com o valor flex ou inline-flex:

.container {
  display: flex; /* ou inline-flex */
}

Propriedades do contêiner flex

Direção dos itens

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

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

Quebra de linha

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (padrão): todos os itens em uma única linha
• wrap: os itens passam para a linha seguinte, se necessário
• wrap-reverse: os itens passam para a linha anterior, se necessário

Atalho flex-flow

.container {
  flex-flow: row nowrap; /* flex-direction e flex-wrap combinados */
}

Alinhamento horizontal (justify-content)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (padrão): itens alinhados no início
• flex-end: itens alinhados no fim
• center: itens centralizados
• space-between: espaço igual entre os itens
• space-around: espaço igual ao redor dos itens
• space-evenly: espaço igual entre e ao redor dos itens

Alinhamento vertical (align-items)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch (padrão): estica os itens para preencher o contêiner
• flex-start: itens alinhados no topo
• flex-end: itens alinhados na parte inferior
• center: itens centralizados verticalmente
• baseline: itens alinhados pela linha de base

Alinhamento das linhas (align-content)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Essa propriedade só tem efeito quando há várias linhas de itens.

Propriedades dos itens flex

Ordem

.item {
  order: 0; /* padrão */
}

Quanto maior o valor, mais tarde o item aparece na ordem.

Flexibilidade (flex-grow, flex-shrink, flex-basis)

.item {
  flex-grow: 0; /* padrão */
  flex-shrink: 1; /* padrão */
  flex-basis: auto; /* padrão */
}

• flex-grow: capacidade de um item de crescer
• flex-shrink: capacidade de um item de encolher
• flex-basis: tamanho padrão de um item

Atalho flex

.item {
  flex: 0 1 auto; /* flex-grow, flex-shrink e flex-basis combinados */
}

Alinhamento individual

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Essa propriedade permite substituir o alinhamento definido por align-items para um item específico.

Exemplo prático

Veja um exemplo de layout com Flexbox:

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

Casos de uso comuns

1. Centralização perfeita (horizontal e vertical):

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

2. Navegação responsiva:

nav {
  display: flex;
  flex-wrap: wrap;
}

nav a {
  flex: 1 1 100px;
}

3. Grade flexível:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 1 300px;
  margin: 10px;
}

Conclusão

O Flexbox é uma ferramenta poderosa para criar layouts flexíveis e responsivos. Ele simplifica consideravelmente muitos desafios de layout que eram difíceis de resolver com métodos tradicionais, como floats e posicionamento.

Para aprofundar seus conhecimentos em Flexbox, recomendo explorar o guia completo na MDN e praticar com ferramentas interativas como o Flexbox Froggy.