CSS Flexbox Playground
Intuitively manipulate CSS Flexbox properties and check the layout. Copy the generated CSS code with one click.
Container Properties
Preview
1
2
3
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}
.item-1 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.item-2 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.item-3 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}How to Use
- STEP 1
- Set container properties (e.g., flex-direction) in the left panel
- STEP 2
- Click an item to adjust its individual properties (e.g., flex-grow)
- STEP 3
- Check layout in preview and copy the code below
Notes
- Flexbox behavior may slighty vary across browsers
- Designed for modern browsers
Tips
1
Use the 'gap' property to easily exact spacing between items
2
Set 'flex-wrap: wrap' to allow items to wrap onto multiple lines
3
Combine 'align-items: center' and 'justify-content: center' for perfect centering
FAQ
QUESTION 1
What is Flexbox?
A CSS layout module designed for laying out items in one dimension (row or column).
QUESTION 2
Gap property not working?
Older browsers (like old Safari versions) may not support the gap property for flexbox.
QUESTION 3
Vertical centering not working?
Ensure the container has a defined height. Without height, align-items: center won't have effect.