About this tool
Flexbox Visualizer helps you understand and design CSS flexbox layouts. Adjust controls to see how direction, wrap, and alignment properties affect the layout, then copy the resulting CSS.
Click on items in the preview to see them highlighted. The generated CSS includes the container properties; flex item properties like order, flex-grow, flex-shrink can be added manually.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (left-to-right for row, top-to-bottom for column). align-items aligns items along the cross axis (top-to-bottom for row, left-to-right for column).
How do I make items grow to fill space?
Use flex: 1 or flex-grow: 1 on individual items. This makes them expand to fill available space.
Can I preview nested flex containers?
This tool shows a single flex container. For nested flex layouts, use this tool for each level separately.