Question 1

When to use Flexbox vs Grid?

Accepted Answer

Flexbox = 1-dimensional layout (row OR column). Grid = 2-dimensional (rows AND columns at once). For nav bars, button rows, alignment within a card — Flexbox. For page-level layouts, dashboards — Grid.

Question 2

What's the difference between justify-content and align-items?

Accepted Answer

justify-content controls the MAIN axis (usually horizontal). align-items controls the CROSS axis (usually vertical). If flex-direction is column, the two axes swap.

Property	Effect
`flex-direction`	Main axis: row (horizontal) or column (vertical)
`justify-content`	Distribution along the main axis
`align-items`	Distribution along the cross axis
`flex-wrap`	Wrap items onto multiple lines if needed
`gap`	Spacing between items (replaces margin tricks)

CSS Flexbox Generator

Flexbox property cheatsheet

Common patterns