CSS Flexbox Playground
Explore how direction, wrapping, alignment and item sizing work together. Try practical layouts, resize the preview and export CSS or a standalone demo.
1. Adjust the container
2. Adjust the items
3. Inspect the result
Restore layout settings
Wrapped-line alignment matters when wrapping creates multiple lines and cross-axis space is available. Items share the same flex settings; this version does not configure individual order or align-self. Reverse directions change visual order while DOM and keyboard order stay unchanged. Rename exported classes to fit your project.
Using CSS Flexbox Playground
Inspect one-dimensional layout rules with fixed preview width and container height. The generated CSS matches the container and uniform item settings.
- Choose direction, wrapping, alignment, gap and container height.
- Tune item count, flex basis, grow and shrink, then vary the preview width or try a preset.
- Copy CSS, download the demo or save/import project JSON.
Example
Wrapping cards: row, wrap, basis 180px, grow 1. Decrease preview width to produce more lines. Grow distributes remaining space among items on each line.
Questions & answers
What are the main and cross axes?
Row directions have a horizontal main axis and vertical cross axis. Column directions swap these. Justify-content acts along the main axis; align-items acts across it.
Why does align-content sometimes do nothing?
It distributes wrapped lines when wrapping creates multiple lines and the container has cross-axis space. It does not align individual items in a single nowrap line.
Why can grow change justify-content results?
Flex-grow can consume the available space before justify-content distributes leftover space. Set grow to zero when exploring space-between or centering fixed-size items.
Does reverse direction change keyboard order?
No. Row-reverse and column-reverse change visual placement but retain DOM order. Review accessibility and reading order before using reversed layouts.
Can I style individual items?
This version applies the same flex values to every item and does not set individual order or align-self. Preview font sizes vary to make baseline alignment visible; the downloaded demo includes that decoration.
What can I save?
Copy CSS, download a standalone HTML demo or save a JSON project. Up to 20 items are supported, and JSON imports are limited to 16 KiB. Nothing is automatically stored.
Related tools
A useful next step for your task.
Developer & DataCSS Grid Layout GeneratorCreate equal-column, sidebar and auto-fit card layouts with a responsive preview. Copy CSS, download a working HTML demo and save reusable grid…
Developer & DataCSS Box Shadow & Border Radius GeneratorDesign layered inset and outer box shadows, four corner radii, borders and colors with live previews. Copy or download CSS in pixels or rem units.
Developer & DataCSS Gradient GeneratorCreate linear, radial and conic gradients with editable color stops, positions, opacity and presets. Copy CSS or export a PNG and settings JSON.
Developer & DataFluid Typography BuilderBuild eight responsive text sizes together. Preview their calculated sizes and export reusable CSS variables for your website.
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.