Use direction to choose the main axis for your items.
Local CSS Flexbox generator
Build a Flexbox layout by eye
Choose direction, wrapping, alignment, and gap values, preview the result, and copy clean CSS for your interface.
* Everything runs in your browser. No layout data is uploaded.
CSS ready
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;123456
QUICK GUIDE
Understand the two Flexbox axes
Use justify-content to distribute items along the main axis.
Use align-items to position items on the cross axis.
Turn wrapping on when items should move onto more lines as space gets tight.
FAQ
Flexbox questions
What is the main axis?
The main axis follows flex-direction. In a row it runs horizontally; in a column it runs vertically.
Why does align-items change with direction?
Align-items works on the cross axis, which is perpendicular to the selected main axis.
When should I use Grid instead?
Use Grid when you need explicit rows and columns together. Use Flexbox for one-dimensional groups and alignment.