Free Flexbox Child Alignment Visualizer & CSS Generator

Interactive playground to master CSS Flexbox item properties.

Parent Container

Direction Justify Content Align Items Gap (px)

Child Item Controls

Click an item in the preview to select it.

Align Self

Flex Grow

Flex Shrink

Margin Auto

Top Right Bottom Left

Live Preview

CSS Output