Ambos nos permitem criar layouts complexos que antes só eram possíveis aplicando hacks CSS e/ou JavaScript. Flexbox e CSS Grid compartilham várias similaridades e muitos layouts podem ser resolvidos com ambos. Vamos ver se podemos esclarecer quando você deve usar Flexbox vs. Grade.
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, verá muitos artigos excelentes aparecerem ultimamente, como:
- Rachel Andrew escreveu sobre a questão em 2016 e depois continuou a discuti-la com mais detalhes.
- Em 2019, Chris Coyier iniciou uma tópico viral do Twitter que acabou resultando em um artigo mais longo com alguns exemplos de código interessantes sobre CSS-Tricks.
- Michelle Barker também respondeu ao tópico do Twitter de Chris escrevendo outro excelente artigo sobre 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 em CSS. Ele esclarece os recursos que tiveram mais impacto nas abordagens atuais de CSS, oferecendo insights sobre a evolução contínua do design e da codificação de CSS.
Você também pode encontrar muitos outros posts de blog, artigos, vídeos e discussões relacionados por toda a web. Como o tópico provavelmente permanecerá relevante no futuro, recomendo ler alguns dos artigos acima e desenvolver sua posição sobre a questão, pois nada está definido ainda.
Aqui vai outra opinião.
Uma vs. duas dimensões
A coisa mais importante a saber quando você está descobrindo layouts CSS Grid vs. Flexbox, é que Flexbox é unidimensional, enquanto CSS Grid é bidimensional. Flexbox dispõe itens ao longo qualquer o eixo horizontal ou vertical, então você precisa decidir se quer 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, o CSS Grid permite que você trabalhe em dois eixos: horizontal e vertical. O Grid permite que você crie layouts bidimensionais onde você pode colocar precisamente itens de grade 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 vs. bidimensional. Por exemplo, Chris Coyier fez a seguinte declaração em seu artigo acima mencionado:
“Não sou o maior fã do mundo da diferenciação “1D” vs. “2D” de grid vs. flexbox, só 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 tem que usar flexbox e não grid porque grid só é necessário quando você precisa de 2D. É uma distinção forte, porém, que o layout 2D é possível com grid, embora de maneiras que não é no flexbox.”
E é assim que o CSS funciona na vida real. Podemos criar layouts bidimensionais com flexbox (devido à sua capacidade de encapsulamento) e layouts unidimensionais com CSS Grid (devido à sua capacidade de posicionamento automático) também.
Embora o Flexbox não seja originalmente para construir grades, ele é frequentemente usado dessa forma. O melhor exemplo é o sistema de grade do Bootstrap 4, que é baseado no Flexbox. Todos os sites do Bootstrap 4 por aí usam o Flexbox para realizar layouts bidimensionais, consistindo de linhas e colunas. E há outras ferramentas populares, como o Flexbox Grid, que fazem o mesmo.
Quando usar Flexbox vs. Grid
O equívoco mais comum em relação aos layouts CSS Grid vs. Flexbox é 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 essa abordagem, pois ela pode limitar seriamente as possibilidades. Você precisa avaliar cada layout individualmente, caso a caso, para escolher a melhor opção em CSS Flex vs. Grid.
Foco no posicionamento do conteúdo: CSS Grid
Uma coisa importante a ser notada no debate CSS Flex vs. Grid é que o CSS Grid foca no posicionamento preciso do conteúdo. Cada item é uma célula de grade, alinhada ao longo de um eixo horizontal e vertical. Se você quer controlar com precisão a posição dos itens dentro de um layout, o CSS Grid é o caminho a seguir. A documentação W3 do módulo Grid afirma:
“Ele fornece um mecanismo para 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 precisamente os elementos do bloco de construção de seu aplicativo nas áreas de grade definidas pelas interseções dessas colunas e linhas.”
Com o Flexbox, é difícil prever o comportamento em certas janelas de visualização e você pode obter resultados surpreendentes. Claro, você pode definir as larguras e alturas dos itens flexíveis ou fazer uso do calc() função, mas aí você perde o principal apelo do Flexbox: flexibilidade.
Este não é o caso do CSS Grid. Ele tem propriedades como grid-template-rows e grid-template-columns e utilitários como a unidade de fração que permite calcular tudo com precisão. Portanto, Grid é especialmente adequado para criar layouts incomuns, como layouts quebrados, assimétricos e sobrepostos.
CSS Grid também torna possível criar layouts responsivos sem usar media queries. A ideia vem de Heydon Pickering, que recentemente publicou um vídeo no YouTube sobre layouts algorítmicos. Ele apresenta uma técnica simples de Grid que faz com que as células da grade se ajustem e se ajustem a qualquer tamanho de viewport:
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 é sensível ao conteúdo como o Flexbox, pois o conteúdo dentro dos itens não se estende de forma flexível:
Foco no fluxo de conteúdo: Flexbox
Do outro lado do Flexbox vs. Grid, o Flexbox foca no fluxo de conteúdo em vez do posicionamento do conteúdo. As larguras (ou alturas) dos itens flex são determinadas pelo conteúdo do item. Os itens flex crescem e encolhem de acordo com seu conteúdo interno e o espaço disponível. É assim que os documentos do 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 que você aloque espaço e alinhe itens de forma flexível, e é por isso que é uma das principais coisas a considerar ao tomar uma decisão sobre layouts de CSS Grid vs. Flexbox. Vamos ver como a grade de Heydon ficaria com o Flexbox. O código a seguir adiciona uma margem de 0,5rem a cada item flex (como o Flexbox não tem 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 de largura fixa usando o width ou flex-basis propriedades. No entanto, se você fizer isso, você perde o conhecimento de 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 de forma diferente, com base na quantidade de texto dentro delas. Não há colunas aqui e esta 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 espaço ou pouco espaço na tela. Escrevi sobre o tópico em detalhes no meu artigo sobre o dimensionamento do 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 viewport.
Há outros casos de uso típicos do Flexbox também, como centralizar itens, ajustar o(s) último(s) item(ns) de listas, fixar 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 do navegador para Flexbox vs. CSS Grid
Você também deve considerar o suporte ao navegador ao pensar em CSS Flex vs. Grid. O Flexbox tem bom suporte ao navegador, enquanto o CSS Grid não é suportado pelo IE11 e Edge 15.
Ao discutir Flexbox vs. Grid, os artigos frequentemente recomendam usar Flexbox como fallback para CSS Grid. No entanto, muitos desenvolvedores consideram isso muito trabalhoso 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 um problema ao trabalhar com o Flexbox, vale a pena dar uma olhada nesta lista, pois você pode encontrar a solução para o seu problema. É crucial fazer a escolha certa entre CSS Flex vs. Grid.
[ad_2]
