Modelo CSS: display: flex;
📝 Finalidade
Este modelo é utilizado quando se deseja posicionar elementos ou caixas lado a lado. É útil para layouts com cartões, botões paralelos ou estruturas responsivas.
📘 Explicação
Ao aplicar display: flex; ao elemento pai, os elementos filhos são automaticamente organizados horizontalmente. A propriedade gap permite controlar o espaçamento. Neste exemplo, usamos .flex-container como o contêiner pai e .flex-box como os elementos internos.
✅ Demonstração
📄 Código (trecho)
<style>
.flex-container {
display: flex;
gap: 1rem;
}
.flex-box {
flex: 1;
padding: 1rem;
background: #f2f2f2;
border: 1px solid #ccc;
text-align: center;
}
</style>
<div class="flex-container">
<div class="flex-box">Caixa 1</div>
<div class="flex-box">Caixa 2</div>
<div class="flex-box">Caixa 3</div>
</div>
📦 Código (HTML completo)
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Demonstração de layout flexível</title>
<style>
.flex-container {
display: flex;
gap: 1rem;
}
.flex-box {
flex: 1;
padding: 1rem;
background: #f2f2f2;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-box">Caixa 1</div>
<div class="flex-box">Caixa 2</div>
<div class="flex-box">Caixa 3</div>
</div>
</body>
</html>
🧩 Técnicas práticas para o uso do layout Flexbox
display: flex é uma das propriedades CSS mais poderosas no layout web moderno. Permite o posicionamento intuitivo dos elementos e é ideal para design responsivo.
🎯 Técnicas básicas de alinhamento
Com justify-content você controla o alinhamento horizontal, e com align-items o alinhamento vertical. Por exemplo, justify-content: space-between distribui os elementos igualmente, alinhando-os às extremidades. Além disso, ao adicionar flex-wrap: wrap, os elementos irão quebrar a linha automaticamente em telas estreitas.
✨ Ajustes avançados de layout
Com a propriedade flex nos elementos filhos, é possível ajustar as proporções com precisão. Por exemplo, combinando flex: 2 com flex: 1, os elementos serão exibidos em proporção 2:1. Também é possível usar order para alterar a ordem de exibição sem modificar a estrutura do HTML.
📱 Dicas para design responsivo
Em visualizações móveis, usar flex-direction: column permite alternar para exibição vertical. Combinado com media queries, é possível adaptar o layout para cada dispositivo. Ajustar o valor de gap conforme a largura da tela também é uma boa prática.
Flexbox é extremamente poderoso, mas para layouts mais complexos, considere utilizar o Grid Layout. Além disso, para compatibilidade com navegadores antigos, é necessário incluir prefixos como display: -webkit-box.