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/
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.
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.
Nele, já temos um preview de alguns tipos de item, como imagens, blocos ou textos dentro do content in item.
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
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!