Quando usar Flexbox e quando usar CSS Grid Layout. #105
Replies: 29 comments
-
|
@baltazarparra da para ter o mesmo resultado usando Original: http://codepen.io/rachelandrew/pen/YqqdXL O problema é que se usar |
Beta Was this translation helpful? Give feedback.
-
|
@lagden Concordo plenamente, mas a ideia era essa mesmo, levantar uma questão futura. A flexbox está bem a frente da Grid hoje, mas eu creio que em breve, estarão lado a lado. Obs. o firefox dev também rola as grids. |
Beta Was this translation helpful? Give feedback.
-
|
por enquanto estou em um relacionamento com Flexbox! =D |
Beta Was this translation helpful? Give feedback.
-
|
Mas essa |
Beta Was this translation helpful? Give feedback.
-
|
@lagden parece que não foi bem aceito pelo os demais. Acho a proposta bem interessante, mas acredito que o flexbox precisa está mais presente, porque vejo que ainda tem muita gente que não conhece. |
Beta Was this translation helpful? Give feedback.
-
|
@tcelestino não conhece o O Por quê a |
Beta Was this translation helpful? Give feedback.
-
|
Compartilhando um artigo fresquinho. |
Beta Was this translation helpful? Give feedback.
-
|
@lagden muita gente que trabalha com client-side não conhece o flexbox. Sobre não se tornar popular, realmente é uma pena, acredito que faltou mais "empolgação" da própria MS. |
Beta Was this translation helpful? Give feedback.
-
|
@tcelestino não sei dizer se sua premissa é verdadeira! A primeira vez que utilizei Em 2013 foi quando coloquei em projeto para Bateu um flashback e agora acho que sua premissa seja verdadeira!! O pessoal de agência era ou é uma linha de montagem (copy/paste de código e muda o design). E claro, não podemos esquecer a era Macromedia Flash (quase morto!!) e o DOM( Quando eu entrei na Tribo Interactive em 2012, os caras usavam reset do yahoo!!! e eu já no Sass!!! |
Beta Was this translation helpful? Give feedback.
-
|
[off] |
Beta Was this translation helpful? Give feedback.
-
|
Ta fresquinho heim @diogomoretti ? |
Beta Was this translation helpful? Give feedback.
-
|
Essa pergunta nós debatemos durante o evento de sábado após minha palestra. Tô pensando em fazer um vídeo para falar sobre e com exemplos. |
Beta Was this translation helpful? Give feedback.
-
|
Fala ai pessoal, atualmente estamos em junho de 2017 e vi que os navegadores, edge, chrome, firefox entre outros ganharam suporte para o grid layout, vocês acham que compensa pra galera que ta no inicio aprendendo a estruturar interfaces aprender o grid layout ao invés do flexbox? ou seria a mesma coisa aproveitar somente o sistema de grids do bootstrap, e rodar um estilo padrão nosso por cima? |
Beta Was this translation helpful? Give feedback.
-
|
@Jovsantos voce parece ser iniciante como eu. Por isso, sempre acabo preferindo pegar as opções mais consolidadas, se essas novidades pegarem ou forem realmente úteis, daqui a um tempo ouviremos. Exatamente como foi/é com o flexbox. |
Beta Was this translation helpful? Give feedback.
-
|
@Jovsantos @didiraja aprender é sempre bacana, mesmo que não que seja utilizado em produção pra valer, é legal já ter uma noção de como a parada toda funciona. |
Beta Was this translation helpful? Give feedback.
-
|
@kvnol claro pra isso serve aqui o fórum, mas para coisas muito novas ou que não sei se precisarei mexer, eu acabo indo com cautela. Não evitar, apenas cautela, e ir lendo aos poucos artigos e relatos. |
Beta Was this translation helpful? Give feedback.
-
|
@didiraja exato, concordo. Cautela para evitar dores de cabeça futuras! =D |
Beta Was this translation helpful? Give feedback.
-
|
#105 (comment) E falando sobre o assunto do flex e grid... Apenas um teste... Use os dois juntos e seja feliz!!! |
Beta Was this translation helpful? Give feedback.
-
|
@didiraja Realmente, sou iniciante, aprendi somente o básico sobre tags e propriedades css, mas por enquanto ainda não tenho noção de como criar algo de fato. Tenho muitas dúvidas em questão de estruturar a posição dos elementos no layout, então a solução que encontrei é usar somente o sistema de grids do bootstrap, vi que com o customize posso baixar somente a parte do grid, pelo menos até eu aprender a usar grid layout e/ou flexbox com eficiência. PS: Sobre o Grid layout concordo com vc, é bom ter cautela, acho que daqui há 1 ano a galera ja vai estar usando ele com mais frequência, apesar das coisas mudarem sempre na web, acho que seria bom se essa questão de layout fosse padronizada. |
Beta Was this translation helpful? Give feedback.
-
|
E ai passou um ano! opiniões? rsrs |
Beta Was this translation helpful? Give feedback.
-
|
@tgmarinho agora tá tranquilo! Todos os navegadores estão compatíveis... Por exemplo:
Esse post é bem bacana: https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf Em suma: Utilize os dois com sabedoria... |
Beta Was this translation helpful? Give feedback.
-
|
Olá @tgmarinho , eu tenho utilizado os dois em conjunto na maioria das vezes... Tem esse artigo aqui - da @simoneas02 que eu acho super bacana pq além de explicar a história e como o grid-layout funciona ele também fala rapidamente sobre em que momento utilizar cada uma das tecnologias :) |
Beta Was this translation helpful? Give feedback.
-
|
Bom, eu também sou um iniciante e fiz um curso bacana de flexbox que está disponível na net, e eu achei bem legal mesmo o flexbox, porém eu sei que preciso dar uma olhada no twitter bootstrap e essa parada de grid e tal, e para mobile por exemplo, eu curti bastante o materialize. |
Beta Was this translation helpful? Give feedback.
-
|
o criterio que uso para utilizar os 2: |
Beta Was this translation helpful? Give feedback.
-
|
Legal, muito obrigado pelo feedback =) @LarissaAbreu @lagden |
Beta Was this translation helpful? Give feedback.
-
|
De acordo com a própria especificação do CSS Grid sobre o Flexbox, "It is expected that both will be valuable and complementary tools for CSS authors." CSS Grid Layout Module. Logo, eles não foram desenvolvidos para se anularem, e sim para se complementarem. Depois de estudar bastante sistemas de layout, a melhor arquitetura que encontrei utilizando ambos na mesma estrutura foi a citada pelo @leandroruel , no qual o CSS Grid vai atuar melhor como layout da página, pois ele decide a distribuição bidimensional da mesma. O Flexbox, dentro de um layout bidimensional, vai se comportar ainda melhor, pois sua grande capacidade de se distribuir dentro de uma dimensão vai casar perfeitamente com as "caixas" desenhadas pelo grid. |
Beta Was this translation helpful? Give feedback.
-
|
Esses vídeos são muito bons também: |
Beta Was this translation helpful? Give feedback.
-
Queria compartilhar um material muito rico com vocês,
após assistir uma *palestra da Rachel Andrew ,
fiquei com uma dúvida sobre quando usar Flexbox e quando usar Grid,
mas pouco tempo depois, ela mesma escreveu um artigo sobre isso.
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
*Palestra
Beta Was this translation helpful? Give feedback.
All reactions