Flexbox Sandbox
Learn how flexbox works, play around with the layout builder, and export the result in HTML/CSS
Reset Layout
Export
Flex Direction
row (default)
row-reverse
column
column-reverse
Flex Wrap
nowrap (default)
wrap
wrap-reverse
Justify Content
flex-start (default)
flex-end
center
space-around
space-between
Align Items
stretch (default)
baseline
center
flex-start
flex-end
Align Content
stretch (default)
center
flex-start
flex-end
space-around
space-between
Icons made by
Freepik
from
www.flaticon.com
is licensed by
CC 3.0 BY
Flexbox Sandbox
Learn how flexbox works, play around with the layout builder, and export the result in HTML/CSS