Entendendo o Flexbox: como começar do jeito certo?
O Flexbox é o modelo de layout do CSS mais usado para organizar elementos em páginas web, porque simplifica o alinhamento e torna o design responsivo muito mais previsível. Além de oferecer recursos poderosos, ele traz praticidade para quem precisa montar interfaces que se adaptam a qualquer tela.
Com o Flexbox, você deixa de pensar em qual dispositivo a página vai abrir e passa a descrever como os elementos devem se comportar. Neste artigo, vamos dos conceitos fundamentais até técnicas um pouco mais avançadas, sempre com exemplos de código.
O que realmente é o Flexbox
O Flexbox, oficialmente chamado de CSS Flexible Box Layout, é uma forma organizada de controlar os elementos que colocamos na página. Esse controle vai além de posicionar um elemento, pois também define como ele se comporta quando a tela fica menor ou maior.
Na prática, o Flexbox distribui o espaço disponível entre os itens e alinha cada um deles de forma automática. Por isso, tarefas que antes exigiam float, margens calculadas à mão ou truques com position ficam resolvidas com poucas linhas de CSS.
A especificação oficial do modelo está publicada pelo W3C na CSS Flexible Box Layout Module Level 1. Todos os navegadores modernos suportam o Flexbox, então você pode usá-lo sem medo em projetos atuais.
Container e itens flex
A essência do Flexbox está no conceito de container, que muitas pessoas também chamam de wrapper. O container embrulha os elementos que compõem um bloco da página e decide como eles vão se organizar.
Os filhos diretos desse container recebem o nome de itens flex. Em outras palavras, você configura o comportamento geral no pai e, quando precisar, ajusta detalhes em cada filho.
Com isso, ao criar layouts com Flexbox, você tem controle total sobre o bloco inteiro e também sobre cada elemento que está dentro dele.
Eixo principal e eixo transversal no Flexbox
Antes de escrever qualquer propriedade, vale entender que o Flexbox trabalha com dois eixos. O primeiro é o eixo principal (main axis), que segue a direção em que os itens fluem.
O segundo é o eixo transversal (cross axis), que fica sempre perpendicular ao eixo principal. Assim, se os itens seguem na horizontal, o eixo transversal corre na vertical.
Essa distinção explica por que algumas propriedades alinham na horizontal e outras na vertical. Na verdade, elas alinham ao longo de um eixo, e o eixo muda conforme a direção escolhida.
Além disso, o Flexbox é um modelo unidimensional, ou seja, ele organiza os itens em uma direção por vez. Para controlar linhas e colunas ao mesmo tempo, o CSS oferece o Grid, que veremos mais adiante.
Como criar um container com Flexbox
Para entender o uso do Flexbox, primeiro precisamos conhecer sua estrutura básica. Ela se repete em toda página que utiliza esse modelo de layout.
<div class="container">
<p>HTML course</p>
<p>CSS course</p>
<p>C# course</p>
</div>
No exemplo acima, criamos uma <div> com a classe container, que vai desempenhar o papel de wrapper. Essa classe é essencial, porque envolve todos os elementos que queremos tornar flexíveis.
Em seguida, no arquivo CSS, criamos a regra para essa classe e ativamos o Flexbox:
.container {
display: flex;
}
A propriedade display determina como o elemento se comporta no layout. No caso do Flexbox, basta usar o valor flex para liberar todos os recursos do modelo.
Ao aplicar essa única linha, os parágrafos passam a ficar lado a lado, porque a direção padrão é a horizontal. Além disso, os itens esticam para ocupar toda a altura do container, já que o alinhamento padrão no eixo transversal é stretch.
Valores da propriedade display
Vale lembrar que a propriedade display aceita diversos outros valores, como block, inline, inline-block e grid. Cada um deles define um modelo de formatação diferente para o elemento.
Existe também o valor inline-flex, que cria um container flex com comportamento de elemento em linha. Nesse caso, o container ocupa apenas a largura do conteúdo, enquanto os filhos continuam seguindo as regras do Flexbox.
Direção dos itens com flex-direction
A propriedade flex-direction define qual é o eixo principal. Por padrão, o valor é row, então os itens seguem na horizontal, da esquerda para a direita em idiomas como o português.
.container {
display: flex;
flex-direction: column;
}
Com column, os itens passam a seguir de cima para baixo. Também existem os valores row-reverse e column-reverse, que invertem o início e o fim do eixo.
Lembre que trocar a direção também troca o papel das propriedades de alinhamento. Por exemplo, em column, o justify-content passa a atuar na vertical e o align-items na horizontal.
Alinhamento e justificação no Flexbox
Uma das maiores vantagens de usar um layout flexível é o controle de alinhamento que você ganha sobre cada elemento. Com o Flexbox, centralizar algo na tela deixa de ser um desafio e vira uma questão de duas propriedades.
Alinhamento vertical com align-items
Quando falamos em alinhar um elemento verticalmente em um container com direção row, estamos falando da propriedade align-items. Ela atua no eixo transversal e oferece algumas opções prontas.
.container {
display: flex;
align-items: flex-start;
}
Com flex-start, você pede que os itens fiquem alinhados no início do eixo transversal, ou seja, no topo do container.
.container {
display: flex;
align-items: flex-end;
}
O flex-end é o oposto do flex-start, porque alinha os itens no final do eixo transversal. Dessa forma, em um container com direção row, eles ficam encostados na parte de baixo.
Além desses dois, existe o valor center, que centraliza os itens, e o stretch, que é o padrão e estica os itens para preencher o espaço. Há também o baseline, que alinha os itens pela linha de base do texto.
Alinhamento horizontal com justify-content
Quando falamos em alinhar elementos na horizontal em um container row, entramos na propriedade justify-content. Assim como o align-items, ela tem valores predefinidos, mas atua no eixo principal.
.container {
display: flex;
justify-content: space-between;
}
O space-between é uma excelente opção quando precisamos distribuir os elementos de forma igual na área disponível. Nesse caso, o primeiro item encosta no início, o último encosta no fim e o espaço restante fica dividido igualmente entre eles.
.container {
display: flex;
justify-content: space-around;
}
Também podemos usar o space-around, que coloca o mesmo espaço em volta de cada item. Diferentemente do space-between, ele também deixa espaço nas bordas, embora esse espaço seja metade do que existe entre dois itens.
Por fim, existem os valores flex-start, que é o padrão, flex-end, center e space-evenly. Este último distribui exatamente o mesmo espaço entre os itens e nas bordas.
Espaçamento entre itens com gap no Flexbox
Durante muito tempo, o espaçamento entre itens dependia de margens, o que gerava sobras indesejadas no primeiro ou no último elemento. Hoje, os navegadores modernos suportam a propriedade gap também no Flexbox.
.container {
display: flex;
gap: 16px;
}
Com isso, você define o espaço apenas entre os itens, sem afetar as bordas do container. Portanto, o código fica mais limpo e fácil de manter.
Crescimento e encolhimento dinâmico no Flexbox
Agora que já entendemos o alinhamento no Flexbox, precisamos entender a capacidade de ajuste dinâmico do conteúdo. Ela depende de três propriedades, e todas elas são aplicadas nos itens, não no container.
Esse detalhe confunde muita gente no começo. Afinal, display: flex fica no pai, enquanto flex-grow, flex-shrink e flex-basis ficam nos filhos.
Flex grow
.item {
flex-grow: 1;
}
O flex-grow define quanto um item pode crescer para ocupar o espaço livre do container. Em vez de controlar isso manualmente com px ou %, você entrega essa tarefa ao navegador.
O valor é proporcional entre os itens. Por exemplo, se um item tem flex-grow: 2 e outro tem flex-grow: 1, o primeiro recebe o dobro do espaço livre.
Por padrão, o valor é 0, então os itens não crescem além do tamanho do próprio conteúdo.
Flex shrink
.item {
flex-shrink: 1;
}
O flex-shrink é o oposto do flex-grow, pois cuida do encolhimento do item. Ou seja, ele determina como o elemento se comporta quando falta espaço, como em telas menores.
O valor padrão é 1, o que permite que todos os itens encolham na mesma proporção. Se você usar 0, o item mantém o tamanho original mesmo que o conteúdo transborde.
Flex basis
A terceira propriedade é o flex-basis, que define o tamanho inicial do item antes da distribuição do espaço. O valor padrão é auto, então o navegador usa a largura, a altura ou o tamanho do conteúdo.
.item {
flex-basis: 200px;
}
Nesse exemplo, cada item parte de 200 pixels no eixo principal. Em seguida, o flex-grow e o flex-shrink ajustam esse valor conforme o espaço disponível.
A propriedade flex como atalho
Para facilitar ainda mais, podemos usar apenas a propriedade flex. O primeiro valor corresponde ao flex-grow, o segundo ao flex-shrink e o terceiro ao flex-basis.
.item {
flex: 1 1 auto;
}
Dessa forma, você usa uma única propriedade e define os três valores ao mesmo tempo. A especificação também traz atalhos prontos que aparecem em praticamente todo projeto.
- O valor
flex: initialequivale a0 1 auto, que é o comportamento padrão. - Com
flex: auto, que equivale a1 1 auto, o item cresce e encolhe. - Já
flex: noneequivale a0 0 auto, deixando o item rígido. - Por fim,
flex: 1equivale a1 1 0, ideal para colunas de mesmo tamanho.
O guia de conceitos básicos do Flexbox na MDN detalha cada um desses valores com exemplos interativos.
O recurso de ouro do Flexbox
Já falamos bastante sobre o conceito de wrapper e sobre como ele mantém tudo o que precisamos alterar em um mesmo lugar. No entanto, existe uma propriedade que define se os itens podem quebrar para uma nova linha: o flex-wrap.
.container {
display: flex;
flex-wrap: wrap;
}
Ela aceita três valores, e cada um muda bastante o comportamento do layout:
nowrap, que é o valor padrão;wrap, que quebra os itens em novas linhas;wrap-reverse, que quebra os itens na ordem inversa.
O nowrap é o padrão e mantém todos os itens em uma única linha. Nesse caso, eles encolhem até onde der e, depois disso, transbordam o container, o que costuma prejudicar a responsividade.
O wrap é a opção para quando você quer que o Flexbox quebre os itens em várias linhas. Assim, se não houver espaço suficiente, os itens excedentes descem para a linha seguinte.
Já o wrap-reverse também quebra os itens em várias linhas, mas na ordem inversa do eixo transversal. Na prática, as novas linhas surgem acima das anteriores, o que permite inverter a forma como o conteúdo aparece na tela.
Atalho flex-flow
Assim como a propriedade flex resume o tamanho dos itens, o flex-flow resume a direção e a quebra de linha do container.
.container {
display: flex;
flex-flow: row wrap;
}
O primeiro valor corresponde ao flex-direction e o segundo ao flex-wrap. Com isso, você declara as duas configurações em uma única linha.
Exemplo prático de layout responsivo com Flexbox
Agora vamos juntar tudo em um exemplo real: uma lista de cards de cursos que se reorganiza conforme a largura da tela. O HTML continua simples.
<section class="course-list">
<article class="course-card">HTML course</article>
<article class="course-card">CSS course</article>
<article class="course-card">C# course</article>
</section>
Em seguida, aplicamos o Flexbox no container e definimos o tamanho base de cada card.
.course-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
}
.course-card {
/* cresce, encolhe e parte de 280px */
flex: 1 1 280px;
}
Em uma tela larga, os três cards cabem lado a lado e crescem para dividir o espaço. Por outro lado, em uma tela estreita, o flex-wrap: wrap faz cada card descer para uma nova linha.
Repare que não usamos nenhuma media query nesse exemplo. Mesmo assim, você pode combinar o Flexbox com media queries quando precisar de mudanças maiores, como explica o artigo guia básico sobre media query.
Esse raciocínio de pensar primeiro no comportamento e depois no dispositivo também aparece no artigo pense de forma responsiva.
Flexbox ou CSS Grid
Uma dúvida comum é quando usar o Flexbox e quando partir para o CSS Grid. A diferença principal está nas dimensões: o Flexbox trabalha em uma direção por vez, enquanto o Grid controla linhas e colunas ao mesmo tempo.
Por isso, o Flexbox brilha em componentes como menus, barras de ferramentas, listas de cards e formulários em linha. Já o Grid se encaixa melhor na estrutura geral da página, como cabeçalho, barra lateral, conteúdo e rodapé.
Na prática, os dois modelos convivem muito bem no mesmo projeto. Se quiser conhecer o outro lado, leia o guia básico de display grid.
Erros comuns ao começar com Flexbox
O primeiro erro é aplicar flex-grow ou flex-shrink no container e esperar algum efeito nos filhos. Essas propriedades só funcionam nos itens, então coloque-as na regra dos elementos filhos.
O segundo erro é esquecer que align-items e justify-content dependem do eixo. Portanto, ao mudar para flex-direction: column, o alinhamento horizontal passa a vir do align-items.
Outro problema frequente é manter o nowrap padrão em listas grandes. Nesse cenário, os itens encolhem demais e o conteúdo transborda em telas pequenas.
Por fim, muita gente usa margens para criar espaço entre itens quando o gap resolveria o problema com uma linha. Também vale lembrar que só os filhos diretos viram itens flex, e os netos continuam no fluxo normal.
Vídeo no YouTube sobre Flexbox
No vídeo abaixo, você aprende a usar o Flexbox para criar layouts flexíveis e responsivos nos seus projetos web. Além disso, vê na prática como a ferramenta simplifica o processo de design.
Curso gratuito para criar sites responsivos
Neste curso, usamos a base do HTML e do CSS para criar um projeto de site responsivo, com uma interface que se adapta aos dispositivos. Se você ainda está começando, vale ler também o que você precisa saber antes de aprender HTML.
Conclusão
O Flexbox é uma ferramenta impecável quando o assunto é praticidade de código, porque controla quase tudo o que diz respeito à disposição dos componentes. Com poucas propriedades, você alinha, distribui, redimensiona e quebra itens em linhas.
Neste artigo, vimos o container, os eixos, o alinhamento, o crescimento dos itens e o flex-wrap. Agora, o próximo passo é praticar, então abra o editor, crie um container e teste cada valor apresentado aqui.
É isso aí por hoje! Obrigado pela leitura, bons códigos e até a próxima.
FAQ
O que é o Flexbox no CSS?
É um modelo de layout unidimensional que organiza, alinha e distribui o espaço entre os filhos de um container. Você o ativa com display: flex no elemento pai.
Qual a diferença entre justify-content e align-items?
O justify-content alinha os itens no eixo principal, enquanto o align-items alinha no eixo transversal. Em flex-direction: row, isso significa horizontal e vertical, respectivamente.
Onde devo aplicar flex-grow e flex-shrink?
Sempre nos itens flex, ou seja, nos filhos diretos do container. No container, essas propriedades não têm efeito sobre os filhos.
Flexbox substitui o CSS Grid?
Não, porque os dois resolvem problemas diferentes. O Flexbox trabalha em uma direção e o Grid trabalha em duas, então é comum usar ambos no mesmo projeto.
Todos os navegadores suportam Flexbox?
Sim, todos os navegadores modernos suportam o Flexbox, inclusive a propriedade gap dentro de containers flex.