Ferramentas Visuais para Flexbox

Escrito por

Há um tempo passei por uma situação onde precisava criar algumas coisas com Flexbox (uma nova forma de display do CSS) na parte de layout do react native (já que é feita em flexbox). Para decidir quais atributos vamos utilizar no flexbox, temos algumas ferramentas que podem nos ajudar, e é isso que eu quero mostrar.

Por que ele foi criado? O flexbox veio resolver um problema grande que tínhamos de layout, afinal no CSS fazíamos algumas ‘gambiarras’ com float e virava uma bagunça. Ele ‘flexibilizou’ isso, e temos muito a ganhar com a ferramenta.

Apresentando as Ferramentas

Temos 3 ferramentas, que eu particularmente uso bastante, e com elas fica bem fácil criar um layout. O primeiro é o Flexys-boxes.

https://the-echoplex.net/flexyboxes/

eecb164f 2fe4 4336 af81 32e7492be37a

Podemos mudar o eixo principal (flex-direction) que por padrão esta row, para outras orientações, como por exemplo, column, e a ferramenta vai simular como vai ser a apresentação.

41af88e8 59f7 42bb 862d 37974b103aa3

Dentro de cada um dos Box eu consigo mudar também order, align-self e até mesmo o flex. Com isso, nos é apresentada a linha de código CSS com as propriedades sendo atualizada a cada modificação feita.

Isso é muito legal, pois podemos ir adicionando novos box e ter um preview de como vai ficar e nos ajuda bastante na hora de criar um layout com o flexbox.   A segunda ferramenta é o Interative Flexbox Generator.

https://loading.io/flexbox/

Nele, já temos um preview de alguns tipos de item, como imagens, blocos ou textos dentro do content in item.

b0845ffc 55a7 4186 b1a1 7841c7d8b58d

Também conseguimos mudar o main direction, assim como no flexys-boxes, visualizar como queremos o Wrapping, main align, cross align, etc. Tudo isso tendo um preview de como será o layout.

E a terceira e ultima ferramenta é o visual Guide to CSS3 flexbox.

https://demos.scotch.io/visual-guide-to-css3-flexb

ox-flexbox-playground/demos/

3bae047d f9c3 4f6f 958e cb024ac769e2

Nele, podemos mudar a largura de todos os Box, e também modificar dentro de cada Box, mais ou menos como nas outras duas ferramentas.

Confira mais detalhes no vídeo:

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium