About the CSS Flexbox Generator

Set up a flexbox layout visually and copy the CSS.

How to use the CSS Flexbox Generator

1. Set the Container Properties: direction (row or column), justify-content and align-items.
2. Use + Add Item to add boxes, and choose Selected Item Properties such as Flex Grow, Flex Shrink and Align Self.
3. Press Generate Flexbox CSS, then Copy CSS.

Formula and method

When to use the CSS Flexbox Generator

• Centring an element horizontally and vertically.
• Building a navigation bar where the logo sits on the left and the links on the right.
• Making a row of cards that wrap and share space evenly on small screens.
• Learning how flex properties affect each other by trying them visually.

Common mistakes to avoid

• Mixing up justify-content and align-items. The first works along the main axis, and the second works across it, and the axes swap when you change the direction to column.
• Forgetting flex-wrap, so items shrink instead of moving to the next line.
• Setting flex-shrink: 0 or a fixed width on every item, which can cause overflow on narrow screens.

Tips

• justify-content works along the main axis, and align-items works across it.
• Use gap for spacing between items.
• Use the gap property for spacing instead of margins on each item.
• For two-dimensional layouts with rows and columns, CSS Grid is often simpler.