Layout com Flexbox

Prof. Me. Danilo Bueno

Introdução ao Layout

• O layout é a organização visual dos elementos
• As técnicas de layout permitem controlar o posicionamento dos elementos na página.
• Esse posicionamento do elemento pode ser relativo a:
  • sua posição padrão no fluxo normal de layout
  • os outros elementos ao seu redor
  • seu contêiner pai
  • a janela de visualização (body) principal.

Técnicas de Layout

• Normal flow (display), Flexbox, Grid, Floats, Positioning, Table layout e Multiple-column layout
• Cada técnica tem seus usos, vantagens e desvantagens, e nenhuma técnica foi projetada para ser usada isoladamente.

#

Normal Flow

Bloco (gera quebra de linha)

• Ocupa toda a largura disponível
• Largura e altura são respeitadas

Inline (sem quebra de linha)

• Ocupa apenas a largura necessária
• Largura e altura não são respeitadas

Normal flow

• Por padrão, a largura de um elemento no nível do bloco é 100% da largura do elemento pai, e sua altura é tão alta quanto o seu conteúdo.

• Hierarquia dos elementos HTML

Container

• A ideia de container está muito presente no CSS.
• Englobar/envolver o conteúdo em um elemento HTML.

<div class="container">
  <p>Conteúdo HTML</p>
  <img src="img/foto.png" alt="Imagem exemplo">
</div>

O Flexbox!

• É um modelo de layout unidimensional projetado para permitir o controle total sobre o alinhamento, espaçamento e distribuição de itens dentro de um container.

• O objetivo é simples: tornar os layouts mais flexíveis e previsíveis.

A Mágica do display: flex

• Para ativar o Flexbox, basta aplicar a propriedade:
• display: flex ao elemento pai (o container):

.container {
  display: flex;
}

A partir deste momento, os filhos diretos deste container se tornam flex items e começam a se comportar de uma maneira nova e especial.

O Eixo Principal (Main Axis)

• Os flex items se alinham horizontalmente (esq. p/ dir).
• Essa é a direção do eixo principal (main axis).
• flex-direction permite mudar a direção do eixo principal.

.container {
  display: flex;
  flex-direction: row; /* Padrão: da esquerda para a direita */
  /* flex-direction: column; */ /* De cima para baixo */
  /* flex-direction: row-reverse; */ /* Da direita para a esquerda */
  /* flex-direction: column-reverse; */ /* De baixo para cima */
}

Eixo Principal

flex-direction

permite mudar essa direção.

Alinhamento no Eixo Principal

• justify-content permite distribuir os itens ao longo do eixo principal.

.container {
  display: flex;
  justify-content: flex-start; /* Padrão: agrupa no início */
  /* justify-content: flex-end; */ /* Agrupa no final */
  /* justify-content: center; */ /* Agrupa no centro */
  /* justify-content: space-between; */ /* Espaço igual entre eles */
  /* justify-content: space-around; */ /* Espaço igual ao redor deles */
  /* justify-content: space-evenly; */ /* Espaço perfeitamente igual */
}

Alinhamento Eixo principal

justify-content

permite distribuir os itens ao longo do eixo principal.

Alinhamento no Eixo Cruzado

• align-items controla o alinhamento dos itens no eixo cruzado (perpendicular ao principal).

.container {
  display: flex;
  height: 200px; /* Dando altura ao container para o exemplo */
  align-items: stretch; /* Padrão: estica para preencher */
  /* align-items: flex-start; */ /* Alinha no topo */
  /* align-items: flex-end; */ /* Alinha na base */
  /* align-items: center; */ /* Alinha no centro (verticalmente) */
}

Alinhamento eixo cruzado

align-items

controla o alinhamento dos itens no eixo cruzado (perpendicular ao principal).

Exemplo Clássico

• Centralizar um item perfeitamente na vertical e horizontal.

<div class="pai">
  <div class="filho">
    Estou perfeitamente centrado!
  </div>
</div>

.pai {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: 500px; 
}

Quebra de Linha

• Quando os itens não cabem no container eles “vazam” para fora (overflow).
• flex-wrap controla se os itens devem quebrar para uma nova linha ou não.

.container {
  display: flex;
  flex-wrap: nowrap; /* Padrão: não quebra a linha */
  /* flex-wrap: wrap; */ /* Quebra para a linha de baixo */
  /* flex-wrap: wrap-reverse; */ /* Quebra para a linha de cima */
}

Quebra Linha

flex-wrap

controla se os itens devem quebrar para uma nova linha ou não.

Alinhando as Linhas

• Atenção: Esta propriedade só tem efeito quando há mais de uma linha de flex items
• Ou seja, quando flex-wrap é diferente de nowrap.
  • align-items alinha os itens dentro de uma linha
  • align-content alinha as próprias linhas dentro do container.

Alinhando as Linhas

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px; /* Altura para vermos o efeito */
  align-content: flex-start; /* Agrupa as linhas no início */
  /* align-content: flex-end; */ /* Agrupa no final */
  /* align-content: center; */ /* Agrupa no centro */
  /* align-content: space-between; */ /* Espaço igual entre as linhas */
  /* align-content: space-around; */ /* Espaço igual ao redor das linhas */
  /* align-content: stretch; */ /* Padrão: estica as linhas */
}

Alinhando Linhas

align-content

alinha as próprias linhas dentro do container.

Espaçamento entre os itens

• gap: cria um espaçamento apenas entre os itens.

.container {
  display: flex;
  gap: 10px;  /* Aplica 10px de espaço na horizontal e vertical */
  row-gap: 20px; /* Define o espaço apenas entre as linhas */
  column-gap: 15px; /* Define o espaço apenas entre as colunas */
}

Espaçamento entre os itens

gap

cria um espaçamento apenas entre os itens.

Flex Items

Propriedades dos Filhos

Controlando os Filhos

• Todas as regras anteriores foram definidas no elemento pai.
• Mas e se quisermos que um item específico se comporte de maneira diferente dos seus irmãos?
• Para isso, aplicamos propriedades diretamente nos flex items.

Ordem Visual

• order permite mudar a ordem visual dos itens
• O valor padrão de order é 0.
• Itens com valores menores aparecem primeiro.

<div class="container">
  <div class="item-1">Primeiro no HTML</div>
  <div class="item-2">Segundo no HTML</div>
</div>

.item-1 { order: 2; } /* Vai para o final */
.item-2 { order: 1; } /* Vem para o início */

Ordem Visual

order

permite mudar a ordem visual dos itens, sem tocar no código HTML.

Crescimento

• flex-grow define a habilidade de um item “crescer” e ocupar o espaço livre no container.
• É um número sem unidade que funciona como uma proporção.
• O padrão é 0 (não cresce).

.item-a { flex-grow: 1; } /* Ocupará 1 parte do espaço livre */
.item-b { flex-grow: 2; } /* Ocupará 2x mais espaço livre que o item A */

Se todos os itens tiverem flex-grow: 1, o espaço livre será distribuído igualmente entre eles.

Crescimento

flex-grow

define a habilidade de um item “crescer” e ocupar o espaço livre.

Encolhimento e Tamanho Base

• flex-shrink: Define a habilidade de um item “encolher” caso não haja espaço.

  • Padrão é 1 (pode encolher). Use 0 para evitar que o item encolha.

• flex-basis: Define o tamanho inicial de um item antes que o espaço livre seja distribuído.

  • Pense nela como uma width “sugerida”.
  • Padrão é auto.

O Atalho: flex

• A propriedade flex é um atalho para grow, shrink e basis:

.item {
  flex: 0 1 auto;   /* Este é o valor padrão */
}

.item-que-cresce {
  flex: 1 1 auto; /* ou simplesmente 'flex: 1;' */
}

.item-fixo {
  flex: 0 0 250px; /* Não cresce, não encolhe, base de 250px */
}

Alinhamento Individual

• align-self sobrescreve o align-items do container para um item específico.
• Aceita os mesmos valores que o align-items.

.container {
  display: flex;
  align-items: center; /* Todos os itens ficam centralizados */
}

.item-rebelde {
  align-self: flex-end; /* ...exceto este, que vai para a base. */
}

Alinhamento Individual

align-self

sobrescreve o align-items do container para um item específico.

Como é aplicado no Bootstrap?

• O sistema de grid do Bootstrap 5 é baseado em Flexbox.
• Além disso, oferece várias classes utilitárias para facilitar o uso do Flexbox sem escrever CSS personalizado, tais como:
  • .d-flex para definir um container flexível.
  • .justify-content-center, .align-items-center, etc., para alinhamento.
  • .flex-column, .flex-row, etc., para direção dos itens.

Como é aplicado no Tailwind?

• O Tailwind CSS também utiliza Flexbox como base para seu sistema de layout.
• Ele oferece classes utilitárias como:
  • flex para definir um container flexível.
  • justify-center, items-center, etc., para alinhamento.
  • flex-col, flex-row, etc., para direção dos itens.

Para saber mais

• Flexbox Froggy
• Flexbox Defense
• MDN - Conceitos Básicos do Flexbox
• Origamid - Flexbox Guia Completo
• Triângulo - Guia Completo Flexbox
• CSS-Tricks - A Guide to Flexbox (material de referência)

Obrigado!

[email protected] · website/docs · github