Flexbox CSS Generator

Set justify-content, align-items, direction and wrap against a live preview and copy the flexbox rules once the layout looks right.

How to use
  1. Set direction, justify, align and wrap.
  2. Watch the preview update.
  3. Copy the flexbox CSS.
Frequently asked questions
What is the difference between justify-content and align-items?
Justify works along the main axis, align across it. Switch flex-direction to column and the two swap which way they push, which is the usual source of confusion.
Why does align-items: center not center anything?
Usually because the container has no height beyond its content, so the cross axis is already exactly as tall as the items. Give it a height and the centering appears.
When do I need flex-wrap?
As soon as the items could overflow. Without wrap they shrink past the point of readability instead of moving to a second line.
Should I use gap or margins?
Gap. It is supported in every current browser for flexbox and avoids the trailing margin on the last item that margins always leave you cleaning up.
 Last updated 
Powered by maratool