Dá pra viver só de flexbox?
Refletindo sobre o uso do flexbox e 3 dicas essenciais para iniciantes
Este artigo tem como objetivo trazer uma reflexão sobre o uso atual do CSS flexbox, permeando sua história junto ao desenvolvimento das tecnologias envolvidas, bem como a crescente demanda por desenvolver soluções que sejam adaptáveis e híbridas.
As opiniões aqui presentes possuem, é claro, um viés do meu entendimento e conhecimento, por isso, deixo o canal aberto para que a discussão continue e possamos assim crescer enquanto profissionais.
A tal caixa flexível
Por muito tempo fazer um bom CSS era uma coisa cansativa (ok, ainda é! rs), cheia de widths, heights, positions e floats. Vejo que muitas pessoas desenvolvedoras criaram uma relação ruim com o CSS pela dificuldade em manipulá-lo adequadamente.
Não é pra menos, já que quando as multi-telas chegaram, o caos se instalou no CSS. Dar suporte a uma variedade de formatos era uma tarefa difícil e desgastante, sendo comum o uso de milhares de media queries e breakpoints.
O flexbox chegou para tentar diminuir este gargalo da programação, com a função de facilitar a criação de layout verdadeiramente responsivos e líquidos.
A tal flexibilidade presente em seu nome permite que containers de conteúdos agora sejam facilmente manipulados, assim como seus elementos filhos. Agora é possível alinhar vertical e horizontalmente, dividir o conteúdo em linhas e colunas, delimitar uma quantidade igual de largura/altura, mesmo que contenham uma quantidade diferente de conteúdo e ainda fazer quebra de linhas e colunas de maneira uniforme.
Aprendendo a usar flexbox
Quando eu estava aprendendo a fazer CSS responsivo, descobrir o flexbox foi um alívio rs. Não sei vocês, mas eu tenho um pé no design (ou no TOC haha) que me faz ficar extremamente incomodada com coisas mal alinhadas! Então poder fazer aquela landpage responsiva e mobile first com flexbox ficava tão mais simples.
Por isso quero compartilhar aqui algumas dicas de achados para aprender ou rever conteúdos que me ajudaram muito:
- Playground Demos Scotch
Um deles foi o playground do Demos Scotch. Com ele é possível entender e simular o uso do flexbox durante o processo de desenvolvimento. Fazendo exemplos em tempo real, ele evita que você perca um tempão testando mil uma combinações direto no seu inspetor do navegador.
2. Froggy Flexbox
Um outro achado que me ajudou bastante foi o jogo do Sapinho. Esse é pra quem curte uma parada mais gamification, eu recomendo muito! Se você se envolve tanto com jogos quanto eu, duvido não compartilhar a tela da última fase concluída em alguma rede social! haha 😆
3. Guia Completo Flexbox Origamid
Infelizmente, os conteúdos acima são muito legais mas são todos em inglês. Como eu queria que as dicas de conteúdo aqui fossem mais inclusivas com quem está começando, eu separei pro final um é de qualidade e é em português, yey!
O site da Origamid tem um guia completo e muitíssimo bem elaborado sobre flexbox! Se você está estudando ou quer rever alguns conceitos, a leitura é (quase) obrigatória.
Será que o flexbox resolve todos os problemas?
Definitivamente ele ajuda muito! Não tem como negar que você ganha agilidade e um design mais fiel aos protótipos. Digo mais, sabendo usar legal, da pra dispensar o uso de frameworks como Bootstrap (quis ser polêmica agora! haha)
Porém como nem tudo nessa vida é lindo o tempo todo, conforme você vai avançando na complexidades de seus projetos, começa a notar que usar somente flexbox pode ficar um pouco confuso.
É comum você começar a colocar flexbox dentro de flexbox, porque seus containers agora são grandes e cheios de outros containers. Além do que, alinhar um layout inteiro só com flexbox ainda vai te demandar muitos widths, heights, media queries e breakpoints.
Pensando fora da caixa
Calma lá, você não estava achando que eu ia finalizar um texto tão bacana (humildade, mode on) com uma conclusão tão triste, não é mesmo?
Foi pensando em resolver projetos de layout mais complexos que surgiu uma outra ferramenta ma-ra-vi-lho-sa no CSS, o Grid Layout! Já ouviu falar sobre ele? A complexidade, seus prós e contras e dicas de uso serão assuntos para outro dia.
Ficou curiosa para aprender mais sobre CSS? Prometo que haverão mais textos! ;)
