CSS Flexbox Generator
science
Sample
restart_alt
Reset
HTML snippet
display: flex;
Display
flex
inline-flex
Direction
row
row-reverse
column
column-reverse
Wrap
nowrap
wrap
wrap-reverse
Justify Content
flex-start
center
flex-end
space-between
space-around
space-evenly
Align Items
stretch
flex-start
center
flex-end
baseline
Align Content
stretch
flex-start
center
flex-end
space-between
space-around
Gap
Row Gap
Column Gap
Items
Selected Child
Selected Child
Grow
Shrink
Basis
Align Self
auto
stretch
flex-start
center
flex-end
baseline
Order
Presets
Centered
Navbar
Equal Cards
Wrapping Grid
Sidebar
Bottom Aligned
Space Between
Copied output