3

Primeiramente tivemos o Flexbox como uma nova solução para a construçãod e layouts responsivos. Mais precisamente na parte de grids. Agora há pouco tempo surge o CSS Grid. Minha questão é: Qual a diferença dos 2 ? Quando devo usar 1 ao invés do outro ? Para a construção de grids para layouts responsivos, qual devo escolher ?

Obrigado

2 Respostas 2

2

Se usa mais o GRID para toda a página (o < body > todo). Vai dividir a página completa em linhas e células (como se fosse uma grande planilha Excel). Esse GRID foi [inter-] invenção da Microsoft. Mas a maioria dos navegadores ainda não o aceitam, somente o EDGE da MS. :/

O FLEX (display:flex) é mais usado para centralizar ou posicionar < li >´s ou < div >´s que estão dentro de uma outra div mãe (contenedor). O FLEX é o mais usado hoje (que o GRID, que praticamente está em fase de teste). Mas, atenção: FLEXBOX é uma coisa, o FLEX do display:flex (CSS) é outra coisa. Espero que você me perguntou desse último, ainda que muitos chamam o FLEX de FLEXBOX, mas não é correto: FLEXBOX é um framework. FLEX são atributos do CSS puro.

Talvez o GRID só será algo para que voltemos ao passado dos tables... Não está sendo visto como boa alternativa pela maioria.

Aquí fiz um exemplo de FLEX para centralizar linhas e colunas, usando flex:.
https://codepen.io/colombe/pen/mPmNbb

Te recomendo que leia isso: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

5
  • pergunta: o flex do css não tem suporte pra todos os navegadores, mas o flexbox tem? Commented 9/06/2016 às 2:04
  • Sinceramente eu não sei pq esse frame nunca usei. Mas o FLEX parece que está mais aceito.. veja isso: i.sstatic.net/azmua.png
    – Fiel
    Commented 9/06/2016 às 2:07
  • Obrigado pela resposta @Fiel. Sim, não estava falando do framework. Mas sobre a questão do nome, até mesmo a W3 o chamada assim 0 w3.org/TR/css-flexbox-1. Commented 21/08/2016 às 19:04
  • O framework flexbox utiliza os atributos chamados flexbox pra fazer essa parte de responsividade. Commented 21/08/2016 às 19:05
  • 1
    Grid é suportado pela maioria dos navegadores hoje em dia. Commented 27/10/2022 às 16:41
1

Os propósitos de flexbox e Grid-layout são diferentes.

Flexbox:

O foco dele é organizar os itens em linhas ou colunas, mas seguindo o sistema de "blocos", ou seja o conteúdo será vários retângulos, um ao lado do outro, ou sobre o outro.

Grid-layout:

Como o nome diz, faz um grid (grade), e serve para organizar seus itens de forma mais sofisticada, onde cada um tem um comportamento independente, ocupa um número de linhas e colunas que você estipula. Exemplo de layout que precisei fazer: grid-layout A versão mobile era totalmente diferente dessa, mas foi muito fácil de converter, pois, como eu disse, cada item se comporta independente, logo eu só mudei a posição de cada um deles e foi mais fácil do que usar qualquer "gambiarra". Problema do Grid-layout é a compatibilidade com IE, funciona somente na versão 11 e não muito bem, então uso uma biblioteca mixin SASS que gera para mim. grid-layout-IE11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .