The Code Codex
Theme
pten
GitHubLinkedIn
How is it calculated?Terminal

CSS Playground

Flexbox, grid and CSS features few people remember exist: container queries, :has(), popover, anchor positioning, @property and more. Move the controls or edit the CSS and see it live.

The link keeps what is on screen.
Parameters
Demo
1 / 16
Controls
flex-direction
justify-content
Alignment
Line wrapping

Flexbox

Widely available

Lays out items in one direction (row or column) and controls alignment, spacing and wrapping.

💡 gap works in flexbox: no more margin on every item to separate them.

Variables set by the controls
:root {
  --direction: row;
  --justify: flex-start;
  --align: stretch;
  --wrap: nowrap;
  --gap: 12px;
}
Demo HTML
<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>
How is it calculated?
Each demo runs in an isolated iframe, without JavaScript: the CSS doesn't affect the site and nothing is executed. The controls set CSS variables (like --gap) that the CSS uses with var(). The support badge follows web.dev Baseline: widely = in every major browser for more than 2.5 years; newly = for less time; limited = some browser is missing.
See the code ↗

Processed in your browser; nothing is sent.

⌨️ Use from the terminal (JSON)

This tool also runs outside the site: the cli.js script uses the same logic as this page and returns the result as JSON. Parameters are the same as this page's URL — copy the command below with the values on screen.

Deno
deno run -q "https://thecodecodex.com/cli.js?tool=css-playground"
Node.js / Bun
curl -s https://thecodecodex.com/cli.js | node --input-type=module - css-playground demo=…
ParameterDescriptionDefault
demodemo: flexbox | grid | container | clamp | sticky | has | sibling-index | popover | accordion | scroll-snap | field-sizing | property | color-mix | backdrop | text-wrap | scroll-drivenflexbox
vvalores dos controles, na ordem, separados por vírgula—
cssCSS editado (no site fica depois do #)—
langpt | en (comentários e textos da demo)pt

Requires Deno, Node.js or Bun. With Deno the script runs with no permissions: it cannot read files or access the network. Central Bank indicators are from the day the site was published.

More in Development