Flexbox Simulator

Container Properties (Parent)

flex-direction

flex-wrap

justify-content (Main Axis)

align-items (Cross Axis)

align-content (Multi-line)

gap 0px

Click on an item in the preview area to edit its specific properties.

Selected Item None

align-self

grow

shrink

order

basis

width

height

Built with HTML/CSS/JS in a single file.

Drag the bottom-right corner of the container to resize it.