Container Settings
Preview
Click on an item to edit its properties
Select an Item
Click on an item in the preview to edit its individual properties.
CSS Code
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
📦 What is Flexbox Playground?
Flexbox Playground is an interactive tool for visually learning and experimenting with CSS Flexbox layouts. Adjust container properties like flex-direction, justify-content, and align-items, as well as individual item properties like flex-grow, flex-shrink, and order in real-time to see how each property affects the layout instantly. The configured properties are auto-generated as CSS code ready to copy and use.
📋 Key Flexbox Properties
| Property | Applies To | Description |
|---|---|---|
| flex-direction | Container | Main axis direction (row, column) |
| justify-content | Container | Main axis alignment (start, center, space-between) |
| align-items | Container | Cross axis alignment (start, center, stretch) |
| flex-wrap | Container | Line wrapping (nowrap, wrap) |
| flex-grow | Item | Ratio for distributing extra space |
| order | Item | Change visual order |
💡 Flexbox Tips
- Perfect Centering: Use justify-content: center + align-items: center
- Even Distribution: Use space-between to push first/last items to edges
- Responsive Grid: Combine flex-wrap: wrap with flex-basis for auto-wrapping
- Reorder Items: Use order property to change visual order without changing HTML
Frequently Asked Questions
What is the difference between Flexbox and Grid?▼
Flexbox is best for 1-dimensional layouts (row OR column), while Grid is best for 2-dimensional layouts (rows AND columns). Navigation bars suit Flexbox, while full page layouts often suit Grid better.
What is the difference between flex-grow and flex-shrink?▼
flex-grow determines how much an item grows when there is extra space, while flex-shrink determines how much it shrinks when space is insufficient.
When should I use align-content?▼
align-content controls spacing between multiple lines when flex-wrap: wrap is set and items wrap to new lines. It has no effect on single-line flex containers.
What is Flexbox Playground?
Experiment with all CSS Flexbox properties visually. Adjust container and item properties while seeing real-time results. Copy generated CSS code for your projects.