CSS Flexbox Generator
Set direction, alignment, wrapping and gap, and copy the flex container CSS.
Quick answer: enter your details below and click Generate flex CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Choose a direction for the items.
- Set justification, alignment, wrapping and gap.
- Click Generate flex CSS and copy the rule into your stylesheet.
About this tool
Flexbox lines up items in a row or a column and controls how they spread, align and wrap. Pick a direction, choose how items are justified and aligned, decide whether they wrap, and set the gap. This tool writes the container rule, so you can paste it and let the child items flow into place.
Frequently asked questions
What is the difference between justify-content and align-items?
Justify-content spreads items along the main direction, while align-items lines them up across the other direction. In a row, that means horizontal versus vertical.
When should items wrap?
Turn wrapping on when a row of cards or tags should drop to a new line on narrow screens instead of squeezing or overflowing.