Dev MaxxingBeginnerHTML and CSS75 sec

Flexbox

Flexbox is a CSS layout mode that arranges elements along a single row or column, distributing space and alignment between them automatically.

Mark as completed

Prerequisite: CSS box model

What matters

It solves common one-dimensional layout problems, like centering items or spacing them evenly, that were historically awkward to achieve with older CSS techniques.

Example

Setting a container to 'display: flex' with 'justify-content: space-between' evenly spaces its child elements across the row automatically.

Common misconception

Flexbox is not designed for full two-dimensional page layouts with both rows and columns; CSS Grid is generally better suited to that.

Recall question

What kind of layout problem is flexbox specifically designed to solve?

Keywords and related concepts

flexboxlayoutalignmentcss grid