Search pages
Search all CSS Showcase pages by name
Flexbox
The flexible box layout — your go-to tool for one-dimensional layouts
Flexbox Fundamentals
Flexbox makes it easy to align and distribute space among items in a container, even when their size is unknown or dynamic.
Flex Direction
1
2
3
Row (default)
1
2
3
Column
css
Flex Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
flex-wrap: wrap
css
Flex Grow, Shrink & Basis
No grow
Grow: 1
Grow: 2
css
Gap Property
1
2
3
4
gap: 1rem
css
Alignment & Justification
Flexbox shines when it comes to alignment. Control both main axis and cross axis alignment with ease.
Justify Content (Main Axis)
1
2
3
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
space-between
1
2
3
space-around
1
2
3
space-evenly
css
Align Items (Cross Axis)
1
2
3
flex-start
1
2
3
center
1
2
3
flex-end
1
2
3
stretch
1
2
3
baseline
css
Perfect Centering
Perfectly Centred!
css
Interactive Flexbox Playground
Experiment with different flexbox properties and see the results in real-time!
Container Properties
10px
Item Properties
5
0
1
Generated CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}Ready for Real-World Patterns?
Now that you've mastered the fundamentals, explore common patterns and pro tips.