✨ Flexbox Studio
Build, preview and export modern Flexbox layouts instantly.
← Back
Container Settings
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
justify-content
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items
stretch
center
flex-start
flex-end
baseline
align-content
stretch
center
space-between
space-around
gap (px)
items count
Update Layout
Item Settings
Width
Height
Background
flex-grow
flex-shrink
flex-basis
order
align-self
auto
center
stretch
flex-start
flex-end
Update Items
Live Preview
Generated CSS
Copy Container CSS
Copy Item CSS