Flexbox Playground
Experiment with all CSS Flexbox properties visually and copy the generated CSS code.
About This Tool
The Flexbox Playground is a free, browser-based visual tool that lets you experiment with every CSS Flexbox property in real time. Flexbox (Flexible Box Layout) is the most widely used CSS layout system for building responsive, one-dimensional layouts. Despite its power, getting the right combination of container and item properties can be tricky — especially when dealing with align-content vs align-items, or understanding how flex-grow, flex-shrink, and flex-basis interact.
This tool provides a visual playground where you can configure all parent container properties — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — and see the results immediately in a live preview. You can also add multiple child items and configure each one individually with flex-grow, flex-shrink, flex-basis, order, and align-self.
Built-in presets cover common layout patterns: a basic row layout, column layout, centered content, the classic Holy Grail layout, and a navigation bar pattern. Select any preset to instantly populate the playground, then tweak properties to match your specific needs. The generated CSS code updates in real time and can be copied to your clipboard with one click.
If you are working with CSS units, the px-rem converter can help you convert gap and basis values between px and rem. For more complex two-dimensional layouts, check out the CSS Layout Generator which also supports CSS Grid. And if you need to generate color values for your flex items, the Color Converter converts between HEX, RGB, and HSL formats instantly.
All processing runs entirely in your browser. No data is sent to any server — there are no network requests, no analytics on your layouts, and no third-party services involved. The tool is ideal for learning Flexbox, prototyping layouts, debugging alignment issues, or quickly generating CSS code for production use.
How to Use
- Choose a preset to start with a common layout pattern, or begin from scratch with the default three-item row layout.
- Adjust container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) using the dropdown menus and input fields in the left panel.
- Click on any item in the preview or use the item selector buttons to choose which child to configure.
- Adjust item properties (flex-grow, flex-shrink, flex-basis, order, align-self) for the selected child item.
- Click Add to add new flex items or Remove Item to delete the selected one.
- View the live-updating Generated CSS code below the preview panel.
- Click Copy or press Ctrl+Shift+C to copy the generated CSS to your clipboard.
Popular Flexbox Examples
FAQ
What is the difference between justify-content and align-items?
justify-content controls the alignment of flex items along the main axis (horizontal for row, vertical for column). align-items controls the alignment along the cross axis (vertical for row, horizontal for column). Think of justify-content as 'how to distribute items along the direction they flow' and align-items as 'how to position items perpendicular to that flow'.
When should I use flex-grow vs flex-basis?
flex-basis sets the initial size of a flex item before free space is distributed — similar to setting width (in a row) or height (in a column). flex-grow determines how much of the remaining free space an item should take up. Use flex-basis to set a starting size and flex-grow to control how items expand to fill available space. For example, flex-basis: 200px with flex-grow: 1 means 'start at 200px, then grow equally with siblings'.
What does flex-shrink do?
flex-shrink controls how much a flex item should shrink when the container is too small to fit all items at their flex-basis size. The default value is 1, meaning all items shrink equally. Setting flex-shrink: 0 prevents an item from shrinking below its flex-basis. Higher values make items shrink more relative to siblings with lower values.
How does align-content differ from align-items?
align-content controls the spacing between flex lines when there are multiple lines (flex-wrap: wrap). It has no effect on single-line flex containers. align-items controls how individual items are aligned within their line along the cross axis. Use align-items for single-line layouts and both properties together for wrapped multi-line layouts.
What is the order property used for?
The order property controls the visual order of flex items without changing the HTML source order. Items are arranged in ascending order value. The default is 0. Negative values place items before default-ordered items. This is useful for responsive designs where you want items in different visual positions at different breakpoints while maintaining a logical source order for accessibility.
Is my data safe?
Yes. All processing runs entirely in your browser using JavaScript. No data is sent to any server. The tool generates CSS code locally and has no network dependencies. You can verify this by checking the Network tab in your browser's developer tools while using the playground.
Can I use the generated CSS in production?
Absolutely. The generated CSS is standard, production-ready Flexbox code that works in all modern browsers. Flexbox has over 99% browser support globally. Simply copy the code and paste it into your stylesheet. You may want to add vendor prefixes if supporting very old browsers, but this is rarely needed today.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread, and color. Multi-layer support.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with color stops, angle control, and live preview.
CSS Border Radius Generator
Design CSS border-radius values visually with per-corner control, live preview, and generated CSS code.
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
CSS Easing Function Editor
Visually edit cubic-bezier() easing functions with draggable control points, animation preview, and comparison mode.
CSS Transform Playground
Experiment with CSS transform functions visually. Build translate, rotate, scale, skew, and 3D transforms with live preview.
CSS Transition Generator
Generate CSS transition properties visually with property, duration, timing function, and delay controls. Live preview and presets.
Viewport Size Reference
Browse 60+ device viewport sizes for responsive web design. Compare iPhone, iPad, Android, laptop, desktop, and TV screen dimensions.
z-index Manager
Design and manage CSS z-index layer hierarchies visually. Generate CSS variables, Sass maps, or JS/TS objects with conflict detection.
SVG Path Editor
Visually edit SVG path d attributes with draggable control points, command palette, bezier curve handles, and real-time preview.
CSS Selector Reference
Complete interactive CSS selector reference with specificity calculator, live preview, searchable categories, and browser support for every selector.