Flexbox e CSS Grid são dois módulos de layout CSS que se tornaram populares nos últimos anos. Quando usar qual é outra questão.
Ambos nos permitem criar layouts complexos que antes só eram possíveis aplicando hacks CSS e/ou JavaScript. Flexbox e CSS Grid compartilham múltiplas semelhanças e muitos layouts podem ser resolvidos com ambos. Vamos ver se podemos esclarecer quando você deve usar o Flexbox e quando deve usar CSS Grid.
Recapitulação da indústria
O debate CSS Grid vs. flexbox é atualmente o tópico mais quente na comunidade CSS. Se você acompanha as notícias do setor, terá visto muitos artigos excelentes aparecerem recentemente, como:
- Rachel Andrew blogou sobre a questão já em 2016 e mais tarde continuou discutindo-a com mais detalhes.
- No mês passado, Chris Coyier iniciou um tópico viral do Twitter isso acabou em um artigo mais longo com alguns exemplos de código interessantes em CSS-Tricks.
- Michelle Barker também respondeu ao tópico de Chris no Twitter escrevendo outro excelente artigo Grid vs flexbox em seu popular blog CSS {In Real Life}.
- A Comunidade MDN criou alguns documentos completos sobre as diferenças básicas entre Grid e flexbox, que atualmente é a melhor documentação disponível sobre o assunto.
- Um artigo de Geoff Graham discute como os avanços em CSS, incluindo Flexbox e Grid, influenciaram as práticas modernas de escrita de CSS. Ele esclarece os recursos que tiveram maior impacto nas abordagens CSS atuais, oferecendo insights sobre a evolução contínua do design e da codificação CSS.
Você também pode encontrar muitas outras postagens de blog, artigos, vídeos e discussões relacionadas em toda a web. Como o tópico provavelmente permanecerá relevante no futuro, recomendo a leitura de alguns dos artigos acima e o desenvolvimento de sua posição sobre a questão, já que nada está definido ainda.
Aqui está outra opinião.
Uma vs. Duas Dimensões
A coisa mais importante a saber quando você aprende flexbox é que ele é unidimensional, enquanto CSS Grid é bidimensional. O Flexbox organiza os itens junto qualquer o eixo horizontal ou vertical, então você deve decidir se deseja um layout baseado em linhas ou em colunas.
Um layout flexível também pode envolver várias linhas ou colunas e o flexbox trata cada linha ou coluna como uma entidade separada, com base em seu conteúdo e no espaço disponível.
Por outro lado, CSS Grid permite trabalhar em dois eixos: horizontal e vertical. Grid permite criar layouts bidimensionais onde você pode colocar itens de grade com precisão em células definidas por linhas e colunas.
É assim que o W3C quer que usemos flexbox e Grid, no entanto, a prática frequentemente substitui a teoria, e nem todo mundo é fã da narrativa unidimensional versus bidimensional. Por exemplo, Chris Coyier fez a seguinte declaração em seu artigo mencionado:
“Não sou o maior fã do mundo da diferenciação “1D” vs. “2D” de grid vs. flexbox, apenas porque acho que a maior parte do meu uso diário de grid é “1D” e é ótimo para isso . Eu não gostaria que alguém pensasse que precisa usar o flexbox e não o grid, porque o grid é apenas quando você precisa de 2D. É uma forte distinção que o layout 2D seja possível com grid, embora de certa forma não seja no flexbox.”
E é assim que o CSS funciona na vida real. Podemos criar layouts bidimensionais com flexbox (devido à sua capacidade de empacotamento) e layouts unidimensionais com CSS Grid (devido à sua capacidade de posicionamento automático) também.
Embora o flexbox originalmente não seja para construir grades, ele é frequentemente usado dessa forma. O melhor exemplo é o sistema de grade do Bootstrap 4, baseado em flexbox. Todos os sites Bootstrap 4 existentes usam flexbox para realizar layouts bidimensionais, consistindo em linhas e colunas. E existem outras ferramentas populares, como Flexbox Grid, que fazem o mesmo.
Quando usar Flexbox vs Grid
O equívoco mais comum sobre os dois módulos de layout é que Grid é para layouts de página inteira e flexbox é para componentes menores. Este não é o caso. Todos os autores mencionados acima alertam contra esta abordagem, pois pode limitar seriamente as possibilidades. Você precisa avaliar cada layout individualmente, caso a caso, para escolher a melhor opção.
Foco no posicionamento de conteúdo: grade CSS
CSS Grid concentra-se no posicionamento preciso do conteúdo. Cada item é uma célula de grade, alinhada ao longo de um eixo horizontal e vertical. Se você deseja controlar com precisão a posição dos itens em um layout, CSS Grid é a escolha certa. Os documentos W3 do módulo Grid afirmam:
“Ele fornece um mecanismo para os autores dividirem o espaço disponível para layout em colunas e linhas usando um conjunto de comportamentos de dimensionamento previsíveis. Os autores podem então posicionar e dimensionar com precisão os elementos básicos de sua aplicação nas áreas da grade definidas pelas interseções dessas colunas e linhas.”
Com o flexbox, é difícil prever o comportamento em determinadas viewports e você pode obter resultados surpreendentes. Claro, você pode definir as larguras e alturas dos itens flexíveis ou usar o calc() função, mas você perde o principal apelo do flexbox: flexibilidade.
Este não é o caso do CSS Grid. Possui propriedades como grid-template-rows e grid-template-columns e utilitários como a unidade fracionária, que permite calcular tudo com precisão. Conseqüentemente, o Grid é especialmente adequado para criar layouts incomuns, como layouts quebrados, assimétricos e sobrepostos.
CSS Grid também possibilita criar layouts responsivos sem usar consultas de mídia. A ideia vem de Heydon Pickering, que publicou recentemente um vídeo no YouTube sobre layouts algorítmicos. Ele apresenta uma técnica simples de grade que faz com que as células da grade sejam agrupadas e adaptadas a qualquer tamanho de janela de visualização:
1 |
.container { |
2 |
display: grid; |
3 |
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); |
4 |
grid-gap: 1rem; |
5 |
}
|
Embora o layout seja ajustado com base no espaço disponível, ele ainda não reconhece o conteúdo como o flexbox, pois o conteúdo dentro dos itens não se estende de maneira flexível:
Foco no fluxo de conteúdo: Flexbox
Flexbox se concentra no fluxo de conteúdo e não no posicionamento do conteúdo. As larguras (ou alturas) dos itens flexíveis são determinadas pelo conteúdo do item. Os itens flexíveis aumentam e diminuem de acordo com seu conteúdo interno e o espaço disponível. É assim que os documentos flexbox do W3C explicam os objetivos do módulo de layout:
“… (flexbox) ganha ferramentas simples e poderosas para distribuir espaço e alinhar conteúdo de maneiras que aplicativos da web e páginas da web complexas geralmente precisam.”
Resumindo, o flexbox permite alocar espaço e alinhar itens de maneira flexível. Vamos ver como ficaria a grade de Heydon com o flexbox. O código a seguir adiciona uma margem de 0,5rem a cada item flexível (como o flexbox não possui uma propriedade gap, precisamos usar o hack de margem negativa).
1 |
.container { |
2 |
display: flex; |
3 |
flex-wrap: wrap; |
4 |
margin: -0.5rem; |
5 |
}
|
6 |
.item { |
7 |
margin: 0.5rem; |
8 |
}
|
Como você pode ver abaixo, o primeiro item flexível com conteúdo longo se estende até onde for necessário:
Claro, você pode fazer itens flexíveis com largura fixa usando o width ou flex-basis propriedades. No entanto, se você fizer isso, perderá o reconhecimento do conteúdo do flexbox, que é a principal razão de sua existência. Você também pode ver acima que o flexbox trata cada linha de forma independente. Linhas diferentes alinham itens flexíveis de maneira diferente, com base na quantidade de texto dentro delas. Não há colunas aqui e este não é uma grade, mas um layout unidimensional.
O Flexbox também permite que você decida como seu conteúdo deve se comportar quando há muito ou pouco espaço na tela. Escrevi sobre o assunto em detalhes em meu artigo sobre dimensionamento de flexbox. Usando o flex-grow e flex-shrink propriedades, você pode obter um layout completamente fluido que otimiza a alocação de itens flexíveis em cada tamanho de janela de visualização.
Existem também outros casos de uso típicos do flexbox, como centralizar itens, ajustar o(s) último(s) item(s) das listas, colar o rodapé na parte inferior da página e criar menus responsivos. Você pode encontrar ainda mais exemplos de uso do flexbox nos documentos do MDN.
Suporte de navegador para Flexbox vs CSS Grid
Flexbox tem bom suporte a navegadores, enquanto CSS Grid não é compatível com IE11 e Edge 15.
Os artigos frequentemente recomendam o uso do flexbox como substituto para CSS Grid, no entanto, muitos desenvolvedores consideram isso muito complicado e preferem criar seus layouts exclusivamente com flexbox.
Mas o flexbox também não é perfeito. Ele tem alguns problemas sendo coletados no repositório Flexbugs no GitHub (com soluções alternativas entre navegadores para os bugs). Se você encontrar algum problema ao trabalhar com o flexbox, vale a pena dar uma olhada nesta lista, pois você poderá encontrar a solução para o seu problema.
