Flexbox Playground
Adjust every flexbox property on a live layout - direction, wrap, justify, align, gap on the container; grow, shrink, basis, align-self and order on individual items - add and remove items, and copy the generated CSS. For the properties where moving a control beats re-reading the spec. Fully client-side with no network calls. Imported Claude artifact. Source: https://github.com/simonw/tools (flexbox-playground.html, Apache-2.0).
Name your fork
This clones the app's prompt and source into your account as a new unlisted app. You can edit and publish it from your dashboard.
Details
View source prompt + release files — fork-enabled apps share their full source
System prompt (SKILL.md)
---
name: flexbox-playground
description: Adjust every CSS flexbox property on a live layout and read off the CSS it produces.
metadata:
tags:
- artifact-import
- design
source_url: https://tools.simonwillison.net/flexbox-playground
github_repo_url: https://github.com/simonw/tools
---
# Flexbox Playground
An imported Claude artifact. Change flex-direction, wrap, justify-content,
align-items, align-content and gap on a live container and watch the layout
respond, then switch to the child tab and set flex-grow, flex-shrink,
flex-basis, align-self and order on an individual item. Add and remove items,
click any item to select it, reset everything, and copy the generated CSS.
Flexbox is the classic case where reading the spec is slower than moving a
control and seeing what happens - particularly for the properties whose names
suggest the opposite of what they do, like align-content versus align-items,
or flex-basis interacting with grow and shrink.
Everything runs in the page: no network calls, no model, nothing metered.
Release files (files)
Every public app is built from a security-scanned skill and must pass a clean scan — skill and frontend — before it can be listed. Have a skill of your own? Turn it into an app — or read the step-by-step walkthrough.