Há algum tempo eu escrevi um artigo bem bacana intitulado “Flexbox explicado em gifs“. Lá, falei um pouco sobre o excelente trabalho do engenheiro de software Scott Domes, que teve a excelente ideia de explicar o funcionamento do Flexbox utilizando algo que todos nós já estamos acostumados: gifs!

Mas, como acontece em qualquer área do conhecimento, existe uma diferença entre o “ver como fazer” e “fazer na prática”. Por mais intuitivo que uma tecnologia possa parecer, por mais que o texto tenha um apelo visual muito grande, dificilmente a pessoa aprenderá sem colocar a mão na massa (ou, neste caso, no teclado).

Neste artigo veremos uma ferramenta que nos ajudará nesta segunda etapa do processo cognitivo. Vamos ver como funciona o Interactive CSS.

Criando elementos no Flexbox

O Interactive CSS é um projeto criado pelo @js_tut e tem um objetivo simples: tornar a criação de layouts usando o CSS uma experiência mais interativa. A ideia é que a gente possa definir como queremos o layout e o site nos ajuda a gerar o código correspondente:

No site temos dois geradores que funcionam de forma muito semelhante. Como eles são muito iguais, focaremos somente no segundo (mas os convido a ver os dois).

Gerador de CSS

O funcionamento do site é extremamente simples. Logo que entramos, nos deparamos com vários blocos que possuem uma estrutura semelhante:

Cada uma das estruturas possuem as opções de posicionamento dentro do justify-content. Das opções disponíveis, temos:

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch
• space-evenly

Para cada uma das opções, veremos que os blocos são movidos para o seu posicionamento de acordo com as regras do Flexbox. Além disso, temos a opção de adicionar e/ou remover blocos com os botões add+ e remove-.

Nos blocos dentro do container, temos a liberdade de alterar a sua altura e comprimento. Basta clicar no elemento e arrastá-lo livremente. Feito isso, podemos exportar o código correspondente clicando no link Copy To Clipboard.

No caso do exemplo acima, temos o seguinte código:

<style type = 'text/css'>
    .flex { display: flex; flex-direction: row; justify-content: center; width: 800px; border: 1px solid gray; padding: 4px;}
    .flex div { border: 1px solid gray; padding: 4px; background: #A4F2D8; font-family: verdana; font-size: 19px; text-align: center; color: gray; }
</style>
<div class = 'flex'>
    <div style = 'width: 152px; height: 49px'>1</div>
    <div style = 'width: 136px; height: 49px'>2</div>
    <div style = 'width: 150px; height: 49px'>3</div>
</div>

Bem bacana, né?

Conclusão

Para quem está aprendendo a utilizar o Flexbox e precisa de uma apoio visual para entender melhor, ou então para quem está ensinando como o Flexbox funciona, o Interactive CSS é uma excelente ferramenta.

O site possui um layout bem simples, mas cumpre bem o objetivo de nos auxiliar a montar o código e entender como os elementos se posicionam uma vez dentro de um container Flexbox.

Referências

• http://www.csstutorial.org/