Flexbox Basics

Master one-dimensional layout — align, distribute, and reorder elements with flexbox.

Step 1 of 8

Why flexbox was invented

Before flexbox, centering things in CSS was notoriously difficult. Developers used hacks like float, negative margins, and table-cell display just to put things side by side or center them. Flexbox (Flexible Box Layout) was created specifically to solve these layout problems. It gives you precise control over how items are distributed along a single axis — whether that's horizontal or vertical. You'll see flexbox everywhere: Spotify's playlist rows (songs laid out horizontally), YouTube's video suggestion sidebar, and Instagram's story bubbles at the top of the feed.

Think of it this way: Flexbox is like a shelf organizer — you tell the shelf (the flex container) how to arrange the items, and each item adjusts its size and position automatically. You can say "spread them evenly," "push them to the right," or "center everything."

Web Standard

Flexbox is a one-dimensional layout method — it deals with layout in one direction at a time, either as a row or a column. For two-dimensional layouts (rows AND columns), you'll use CSS Grid in the next lesson.

Learn more on MDN

CSSFlexbox CSSdisplay: flex