Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia
Crie barras de navegação, grades de cartões e objetos de mídia práticos usando flexbox.
Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Por que os padrões do Flexbox são importantes
Alguns padrões de layout aparecem em praticamente todo projeto web. O Flexbox resolve cada um deles com eficiência, usando o mínimo de CSS. Conhecer esses padrões significa desenvolver mais rápido e escrever menos código.
Padrão de barra de navegação
Uma navegação horizontal com um logotipo à esquerda e links à direita:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Seção de destaque centralizada
Conteúdo centralizado e com altura total usando Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Grade de cartões
Grade de cartões responsiva com quebra de linha e espaçamentos consistentes:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Objeto de mídia
O objeto de mídia — uma imagem de largura fixa ao lado de um texto flexível — é um padrão fundamental de interface usado em comentários, publicações de redes sociais e itens de listas:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Rodapé fixo com Flex
Empurre o rodapé para a parte inferior sem definir alturas fixas:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Botão com ícone + texto
Ícone + texto centralizados verticalmente em um botão:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Santo graal com Flexbox
Layout santo graal de três colunas (cabeçalho, rodapé, barra lateral-conteúdo principal-barra lateral):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Linha de formulário com rótulos
Pares de rótulo e campo alinhados em uma linha de formulário:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galeria de miniaturas
Uma galeria de imagens com quebra de linha:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Lista de etiquetas
Etiquetas que quebram de linha e fluem como texto:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Verificação rápida
No padrão de objeto de mídia, o que impede que o corpo do texto transborde quando contém uma sequência longa que não pode ser quebrada?
Recapitulação
Padrões comuns do Flexbox: barra de navegação (logotipo + margem automática + links), seção de destaque (coluna + justificação centralizada), objeto de mídia (imagem fixa + corpo com flex:1 e min-width:0), rodapé fixo (corpo em coluna + área principal com flex:1), grade de cartões (quebra de linha + flex:1 1 Xpx). Esses cinco padrões atendem à maioria das necessidades de layout do mundo real.
Perguntas Frequentes
A aula “Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia” é grátis?
Sim — o texto completo de “Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia”?
Crie barras de navegação, grades de cartões e objetos de mídia práticos usando flexbox. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Substituição do Alinhamento de Itens Flex com align-self
- Propriedade order e Reordenação Visual
- Padrões da Forma Abreviada de flex
- Layouts Flexbox Comuns: Navegação, Cartões e Objetos de Mídia