Back to Resources

Flexbox Layout Generator

Visual tool to create and understand CSS Flexbox layouts

Container Properties

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

Item Properties

Click an item in the preview to select it

flex-grow

flex-shrink

flex-basis

align-self

Manage Items

Live Preview

1

2

3

4

Generated Code