Flexbox Playground
A live flexbox sandbox — tweak every container property, click an item to adjust its grow, shrink, basis, order and align-self, and copy the CSS when it looks right. Everything runs in your browser.
About this tool
Flexbox is a one-dimensional layout model: the container distributes space along a main axis (set by flex-direction) and aligns items on the cross axis. justify-content works on the main axis, align-items on the cross axis, and align-content only kicks in when wrapped lines exist. Per-item, flex-grow shares out spare space, flex-shrink absorbs overflow, and flex-basis sets the starting size before either happens.
The generated CSS only includes properties that differ from their defaults, so it stays copy-paste clean. Nothing you do here leaves the page — there is no server and no upload.