How to Lay Out Items with CSS Flexbox
Flexbox handles rows, columns, centering and wrapping with one container rule. This guide explains direction, justification, alignment and gaps in plain terms.
What is the CSS Flexbox Generator?
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.
How to use it
- Choose a direction for the items.
- Set justification, alignment, wrapping and gap.
- Click Generate flex CSS and copy the rule into your stylesheet.
Worked example
With a row direction, centered justification and alignment, wrapping on and a 16px gap, the result is a .flex rule with display flex plus those five settings.
Is flexbox better than grid?
Flexbox suits one-direction layouts like navbars and card rows, while grid suits two-direction page layouts. Many pages use both: grid for the page, flexbox inside each section.
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.