Flexbox Playground
Interactive CSS flexbox layout builder with visual controls, item properties, presets, and instant code generation
Preview
Container Properties
widgets Flex Items 3
dashboard Layout Presets
CSS Code
help Flexbox Quick Reference
Container Properties
| Property | Values | Description |
|---|---|---|
display | flex, inline-flex | Defines a flex container |
flex-direction | row, row-reverse, column, column-reverse | Main axis direction |
justify-content | flex-start, center, flex-end, space-between, space-around, space-evenly | Main axis alignment |
align-items | flex-start, center, flex-end, stretch, baseline | Cross axis alignment |
flex-wrap | nowrap, wrap, wrap-reverse | Whether items wrap |
align-content | flex-start, center, flex-end, stretch, space-between, space-around | Multi-line alignment |
gap | length | Space between items |
Item Properties
| Property | Values | Description |
|---|---|---|
flex-grow | number (default: 0) | How much item grows relative to others |
flex-shrink | number (default: 1) | How much item shrinks relative to others |
flex-basis | auto, length, % | Initial size before growing/shrinking |
flex | grow shrink basis | Shorthand (e.g., flex: 1 1 auto) |
align-self | auto, flex-start, center, flex-end, stretch, baseline | Override align-items for this item |
order | integer (default: 0) | Visual order of item |
Common Patterns
flex: 1
Equal width items (flex: 1 1 0%)
flex: auto
Grow from content size (flex: 1 1 auto)
flex: none
Fixed size, no grow/shrink (flex: 0 0 auto)
margin-left: auto
Push item to the right
CSS Flexbox Layout Builder
The Flexbox Playground is an interactive tool for learning and building CSS flexbox layouts. Visualize how flexbox properties work, experiment with different values, and generate ready-to-use CSS code for your projects.
Features
- Visual Container Controls — Adjust flex-direction, justify-content, align-items, flex-wrap, and gap with instant preview
- Individual Item Properties — Set flex-grow, flex-shrink, flex-basis, align-self, and order for each item
- Layout Presets — 12 common flexbox patterns including Holy Grail, navbar, card layouts, and more
- Multiple Output Formats — Get CSS, HTML, or Tailwind CSS code
- Interactive Preview — See changes instantly with multiple background options
- CodePen Export — Open your layout directly in CodePen for further experimentation
Understanding Flexbox
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It provides powerful alignment capabilities and efficient space distribution among items.
Main Axis vs Cross Axis
| Direction | Main Axis | Cross Axis |
|---|---|---|
| row | Horizontal (left → right) | Vertical |
| row-reverse | Horizontal (right → left) | Vertical |
| column | Vertical (top → bottom) | Horizontal |
| column-reverse | Vertical (bottom → top) | Horizontal |
Common Flexbox Use Cases
| Pattern | Properties | Use Case |
|---|---|---|
| Centering | justify-content: center; align-items: center | Center content in a container |
| Space Between | justify-content: space-between | Navigation bars, card grids |
| Equal Columns | flex: 1 on all items | Equal-width columns that fill space |
| Sticky Footer | flex-direction: column; main content flex: 1 | Footer at bottom of page |
| Holy Grail | Sidebar with fixed width, main with flex: 1 | Classic 3-column layout |
Browser Support
Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For older browsers (IE 11), vendor prefixes may be needed. This tool can optionally include -webkit- prefixes for maximum compatibility.
Flexbox vs CSS Grid
Use Flexbox for one-dimensional layouts (either row OR column) and when content size should determine layout. Use CSS Grid for two-dimensional layouts (rows AND columns) and when you need precise placement control.