CSS Flexbox Playground
Learn and copy flexbox layout code visually.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Adjust direction, wrapping, alignment, gap and child flex values, then copy the CSS for the container and children. A live preview with numbered items makes the alignment behaviour obvious.
How to use it
- Set the flex direction and wrapping.
- Change justify-content, align-items and gap to see the effect.
- Copy the generated container and item CSS.
Frequently asked questions
What does align-content affect?
It distributes space between wrapped lines, so it only has an effect when flex-wrap is enabled and there is more than one line.
Why is gap better than margins?
Gap spaces items without affecting their outer edges and without extra wrapper selectors.
Keep going
Related tools
CSS Grid Playground
Prototype grid layouts and copy the CSS.
CSS Border Radius Generator
Shape corners with independent radii and copy the CSS.
CSS Box Shadow Generator
Design layered shadows and copy the CSS.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.