Flexbox Layout Visualizer
Change the controls below and watch the live preview update instantly. Copy the generated CSS into your own project.
Container controls
Decides the main axis: row places items side by side, column stacks them.
Moves items along the main axis: start, end, middle, or spread apart.
Moves items along the cross axis (for a row, that means up and down).
Decides whether items overflow in one line or wrap into new lines.
Works only when items wrap: positions the whole lines, like justify-content for lines.
Space between every item, without margin hacks.
How many demo boxes to show in the container.
Gives every item
flex: 1 so they grow equally and share all free space.Makes each box a different height so you can see alignment differences clearly.
Live preview
Generated CSS