How do I center a div with Flexbox?

Set the parent to display: flex; justify-content: center; align-items: center. This centers the child both horizontally and vertically.

What is the difference between justify-content and align-items?

justify-content controls alignment along the main axis (horizontal by default). align-items controls alignment along the cross axis (vertical by default). Together they control both dimensions.

When should I use Flexbox vs CSS Grid?

Use Flexbox for one-dimensional layouts — a row of items or a column of items. Use Grid for two-dimensional layouts — rows and columns together. In practice, Flexbox handles navigation bars, card rows, and centering; Grid handles page layouts and complex grids.

How to Use CSS Flexbox: A Practical Guide

📐

Try Flexbox Playground

Free, no signup →