What's the difference between justify-content and align-items?
justify-content positions items along the main axis (horizontal for row, vertical for column), while align-items positions them along the cross axis (the other direction).
Design Tools
CSS Flexbox Generator
Build a flex container visually and copy the CSS. Everything runs locally in your browser.
FAQ
CSS Flexbox Generator FAQ
What do flex-grow, flex-shrink, and order do on an item?
flex-grow controls how much an item expands to fill extra space relative to siblings, flex-shrink controls how much it shrinks when space is tight, and order changes its visual position without changing the HTML source order.
Does the generated CSS include per-item rules?
Yes, but only for items whose grow, shrink, order, or align-self actually differ from the default — keeping the generated CSS short instead of repeating default values for every item.