Playground de CSS
Flexbox, grid e recursos de CSS que pouca gente lembra que existem: container queries, :has(), popover, anchor positioning, @property e mais. Mexa nos controles ou edite o CSS e veja na hora.
Flexbox
Suporte amploDistribui itens em uma direção (linha ou coluna) e controla alinhamento, espaço e quebra de linha.
💡 gap funciona em flexbox: não precisa mais de margin em cada item para separá-los.
:root {
--direction: row;
--justify: flex-start;
--align: stretch;
--wrap: nowrap;
--gap: 12px;
}HTML da demonstração
<div class="row"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
Como é calculado?
Processado no seu navegador; nada é enviado.
⌨️ Usar no terminal (JSON)
Esta ferramenta também roda fora do site: o script cli.js usa a mesma lógica desta página e devolve o resultado em JSON. Os parâmetros são os mesmos da URL desta página — copie o comando abaixo com os valores que estão na tela.
deno run -q "https://thecodecodex.com/cli.js?tool=css-playground"
curl -s https://thecodecodex.com/cli.js | node --input-type=module - css-playground demo=…
| Parâmetro | Descrição | Padrão |
|---|---|---|
| demo | demo: flexbox | grid | container | clamp | sticky | has | sibling-index | popover | accordion | scroll-snap | field-sizing | property | color-mix | backdrop | text-wrap | scroll-driven | flexbox |
| v | valores dos controles, na ordem, separados por vírgula | — |
| css | CSS editado (no site fica depois do #) | — |
| lang | pt | en (comentários e textos da demo) | pt |
Precisa de Deno, Node.js ou Bun. Com Deno, o script roda sem permissões: não lê arquivos nem acessa a rede. Os indicadores do Banco Central são os do dia em que o site foi publicado.