Flex Align Control

Interactive 3x3 grid for selecting flex alignment properties

Direction

Alignment Control

Preview

Children with varying heights• Best for horizontal (row) direction

Children with varying widths• Best for vertical (column) direction

Current Values

Direction: horizontal

Main Axis: start

Cross Axis: start

CSS Output

flex-direction: row;
justify-content: start;
align-items: start;