frontend · easy

Flexbox

CSS layout model for distributing space and aligning items along a single axis.

Where you see it

Flexbox is the default tool for one-dimensional layouts: nav bars, toolbars, card footers, form rows, and centering a group of items. You choose a main axis (`flex-direction`), then control wrapping, alignment (`justify-content`, `align-items`), and how children grow or shrink (`flex-grow`, `flex-shrink`, `flex-basis`).

Why it matters

Almost every UI job expects Flexbox fluency. It is how you stop fighting floats and magic margins. Candidates who can predict what `flex: 1`, `min-width: 0`, and wrapping do under real content are much faster in take-homes and on the job.

Interview angle

Common prompts: center a div, equal-height columns, space items in a header, or explain why a flex child overflows. Mention the main vs cross axis and `min-width: 0` for truncation — that detail separates beginners from people who have shipped UI.

Tags: css