Como o Flexbox organiza e distribui elementos no CSS
Bem-vindo(a) ao post no blog.
Nesse Post você vai aprender Como o Flexbox organiza e distribui elementos; Controle de eixos, alinhamentos e espaçamento; Diferença e uso das propriedades do container e dos itens; Criação de layouts fluidos e responsivos; Montagem de um layout de cards moderno e leve.
🧠 O Que é o Flexbox
O Flexbox (Flexible Box Layout) foi criado para facilitar o design de layouts que se ajustam automaticamente em diferentes telas —
sem precisar usar float, clear ou truques antigos de layout.
Ele trabalha com eixos e relacionamento entre pai e filhos:
● O container pai define o comportamento flexível com display: flex;
● Os filhos (itens) se alinham automaticamente ao longo dos eixos definidos.
🎯 Eixos do Flexbox
→ Eixo Principal (main axis)
↓ Eixo Secundário (cross axis)
Por padrão:
● Eixo principal: horizontal
● Eixo secundário: vertical
Mas isso pode mudar conforme a direção (flex-direction).
⚙️ Ativando o Flexbox
Para usar Flexbox, basta aplicar:
.container {
display: flex;
}
Agora, todos os elementos filhos diretos desse container passam a se comportar de forma flexível.
📏 As Principais Propriedades do Container Flex: Propriedade Função
flex-direction → Define a direção dos itens (row, column, row-reverse, column-reverse)
justify-content → Alinha os itens no eixo principal
align-items → Alinha os itens no eixo secundário
flex-wrap → Faz os itens quebrarem linha automaticamente
align-content → Controla o espaçamento entre linhas múltiplas
gap → Espaçamento automático entre itens (muito útil!)
🔹 Exemplo básico:
📄 HTML
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
📄 CSS
.container {
display: flex;
background: #f0f0f0;
padding: 20px;
gap: 10px;
}
.container div {
background: #0077ff;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
flex: 1; /* todos crescem igualmente */
}
💡 Resultado: Três caixas lado a lado, automaticamente ajustadas e espaçadas.
🧭 Direção e Alinhamento
🔸 flex-direction
Define o eixo principal:
.container {
display: flex;
flex-direction: row; /* padrão */
}
Outras opções:
● row-reverse → inverte a ordem horizontal;
● column → itens empilhados verticalmente;
● column-reverse → itens de baixo para cima.
🔸 justify-content
Alinha no eixo principal (horizontal por padrão):
justify-content: flex-start; /* padrão, itens à esquerda */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
💬 Dica: As variações space-between e space-evenly são ótimas para distribuir botões ou cards proporcionalmente.
🔸 align-items
Alinha no eixo cruzado (vertical por padrão):
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch; /* padrão */
Exemplo: centralizar conteúdo na tela:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
💥 Um dos usos mais comuns e poderosos: centralização perfeita em 2 linhas de CSS!
🔸 flex-wrap
Permite que os itens “quebrem” linha se o espaço for pequeno:
.container {
display: flex;
flex-wrap: wrap;
}
Essencial para tornar galerias e grids responsivos.
🔸 align-content
Controla o espaçamento entre as linhas quando há quebra (com wrap ativo):
align-content: space-around;
🔧 Propriedades dos Itens Filhos (os “flex items”)
Cada item do container pode ter comportamento individual controlado com estas propriedades:
Propriedade Função
flex-grow → Define quanto o item pode crescer
flex-shrink → Define quanto o item pode encolher
flex-basis → Define o tamanho base do item
align-self → Alinha o item individualmente no eixo cruzado
order → Define a ordem de exibição entre os itens
🔹 Exemplo:
.item1 {
flex-grow: 2; /* ocupa o dobro de espaço */
}
.item2 {
order: -1; /* aparece antes dos outros */
}
💡 Ideal para priorizar conteúdos ou reorganizar cards sem mudar o HTML.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
📱 Exemplo Prático – Layout Responsivo de Cards
Vamos aplicar tudo o que vimos para criar um layout profissional de produtos ou posts, 100% com Flexbox.
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Layout Flexbox</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
</div>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #74ABE2, #5563DE);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 40px;
max-width: 1000px;
}
.card {
background: white;
color: #333;
border-radius: 12px;
flex: 1 1 250px; /* crescer, encolher, tamanho base */
padding: 30px;
text-align: center;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-10px);
}
💥 Resultado:
Um conjunto de cartões que:
● Se alinham automaticamente lado a lado;
● Quebram para a linha de baixo quando o espaço é reduzido;
● Mantêm espaçamento (gap) e proporções suaves.
⚡ Técnicas Avançadas e Dicas Profissionais
● Use gap para espaçamento — substitui o antigo margin-right de colunas;
● Combine flex-wrap com min-width nos filhos para grid fluido;
● Centralize qualquer coisa (inclusive textos, ícones, botões) com:
display: flex; justify-content: center; align-items: center;
● Combine com media queries para layouts adaptáveis.
Comentários
Postar um comentário