Web Tools & Experiments

Flexbox CSS Generator

Flex Direction

row
row-reverse
column
column-reverse

Justify Content

flex-start
center
flex-end
space-between
space-around
space-evenly

Align Items

stretch
flex-start
center
flex-end
baseline

Flex Wrap

nowrap
wrap
wrap-reverse

Align Content

stretch
flex-start
center
flex-end
space-between
space-around

Gap

px

Flex Items

Preview

HTML Code (Click to Copy)

CSS Code (Click to Copy)

Preset Layouts

Code copied to clipboard!