Lightning Talk: Não use FlexBox!

Se você trabalha com um ambiente com CSS, o FlexBox pode ser um grande aliado. Mas será que você não está usando mais do que deveria?

Este artigo e Lightning Talk não são sobre ódio ao FlexBox, mas sim sobre até que ponto realmente vale a pena utilizar.

Antes de mais nada, vamos para uma definição:

O que é FlexBox?

O FlexBox (Flexible Box Module) foi projetado como um modelo de layout unidimensional. É um método que oerece distribuição de espaço entre itens em uma interface e capacidades poderosas de alinhamento.”

Quem trabalhou com CSS antigamente, ou trabalhou com display block, sabe o poder que ele tem. Mas, na prática, FlexBox é básicamente o display flex dentro de um elemento.

É o display flex que possibilita todas as ferramentas que possuímos hoje de FlexBox e alinhamento de conteúdo unidimensional no CSS3.

Ok, e quando não usar FlexBox?

Hoje em dia, não tem como não usá-lo por toda a capacidade de alinhamento e facilidades. Mas não podemos colocá-lo em todos os elementos, como se ele fosse uma chave que pode ser usada em qualquer lugar.

Embora o display block, antigamente, pudesse ser usado para todos os problemas, hoje temos outras alternativas.

Em Layouts Complexos, principalmente, fica claro que existem outras opções que o CSS nos dá. Uma delas é o Grid Layout.

Implementar o display grid ajuda muito a trabalhar com templates complexos, principalmente com admin. O Grid Layout encaixa muito bem, e você não precisa se preocupar com flex-wrap, flex-zoom, direcionamento de página e etc.

“Mas por quê?”

Veja no Lightning Talk as razões para usar Grid Layout

Alexandro Hervis, desenvolvedor Front-End na DB1, explicou num Lightning Talk todas as vantagens de usar o Grid Layout em situações que a única solução parece ser o FlexBox.

Assista abaixo e veja a definição de CSS Grid Layout, suas vantagens e exemplos práticos de como trabalhar com display Grid em alternativa ao display flex.

https://www.youtube.com/watch?v=l0P2LCfb7nk