Toolypet
Tools
Blog
Change language
Toggle theme
CSS Tools
/
Flexbox Playground
Flexbox Playground
Build responsive layouts with CSS Flexbox using interactive visual controls
Preview
Reset
Add Item
1
2
3
Container Properties
Flex Direction
row
row-reverse
column
column-reverse
Flex Wrap
nowrap
wrap
wrap-reverse
Justify Content
flex-start
flex-end
center
space-between
space-around
space-evenly
Align Items
flex-start
flex-end
center
stretch
baseline
Align Content
flex-start
flex-end
center
stretch
space-between
space-around
Gap
10px
Presets
Basic Row
Center All
Space Between
Space Around
Space Evenly
Column Layout
Reverse Row
Reverse Column
Wrap Items
Items
Item 1
Flex Grow
Flex Shrink
Align Self
auto
flex-start
flex-end
center
stretch
baseline
Order
Item 2
Flex Grow
Flex Shrink
Align Self
auto
flex-start
flex-end
center
stretch
baseline
Order
Item 3
Flex Grow
Flex Shrink
Align Self
auto
flex-start
flex-end
center
stretch
baseline
Order
CSS Code
Loading...