Sobre esta ferramenta
O CSS Flexbox Playground é um editor interativo para as principais propriedades de layout de um contêiner flex. Escolha valores para flex-direction, justify-content, align-items e flex-wrap em quatro listas suspensas, e uma pré-visualização de cinco caixas numeradas se reorganiza na hora, para que você veja como cada propriedade molda o layout antes de escrever qualquer código.
Abaixo da pré-visualização, a regra .container correspondente é gerada enquanto você trabalha: display: flex seguido das quatro declarações que você escolheu. Um botão copia o bloco inteiro para a área de transferência, pronto para colar em uma folha de estilos. Apenas essas propriedades de nível de contêiner são expostas; configurações por item, como flex-grow, order ou align-self, não são cobertas.
Tudo roda no seu navegador. Nada é enviado, não há contas nem rastreamento, e funciona offline. É uma forma rápida de desenvolver intuição sobre flexbox ou de produzir uma regra inicial que você depois refina à mão.