Key Flexbox Properties
flex-direction
Sets the main axis direction — items flow in a row (default) or column.
row · row-reverse · column · column-reverse
justify-content
Distributes items along the main axis.
flex-start · flex-end · center · space-between · space-around · space-evenly
align-items
Aligns items on the cross axis (one line).
stretch · flex-start · flex-end · center · baseline
flex-wrap
Controls whether items wrap to a new line when they overflow.
nowrap · wrap · wrap-reverse
flex-grow
How much a flex item grows relative to others when extra space is available.
0 (default, no grow) · 1 · 2 · ...
align-self
Overrides align-items for a single flex item.
auto · flex-start · flex-end · center · stretch
How to Use It
1
Open the tool
Go to CSS & Frontend and scroll to the Flexbox Playground.
2
Set container properties
Toggle flex-direction, justify-content, align-items and flex-wrap and watch the container layout change in real time.
3
Adjust individual items
Select a flex item and modify flex-grow, flex-shrink, flex-basis or align-self to see item-level effects.
4
Copy the CSS
Copy the generated container and item CSS declarations to use in your project.
Frequently Asked Questions
What is CSS Flexbox?
Flexbox is a one-dimensional CSS layout model that arranges items in a row or column with powerful alignment controls. Apply
display: flex to a container to enable it.What is justify-content?
Distributes space between items along the main axis.
space-between puts equal space between items; center groups them in the middle.What is align-items?
Aligns items on the cross axis (perpendicular to main).
stretch makes all items the same height; center vertically centres them.What does flex-grow do?
flex-grow: 1 allows an item to grow and fill available space. If two items both have flex-grow: 1, they share space equally. flex-grow: 0 (default) prevents growth.Explore Flexbox now
Open the Flexbox Playground and experiment with every property — see changes live without writing any CSS.
Open Flexbox Playground →