CSS Flexbox Explained: A Visual Guide for Beginners

Flexbox changed CSS layout forever. Before it, centering a div was a meme. Now, with just a few properties, you can build complex responsive layouts that actually make sense.

The Core Concept

Flexbox works on two axes: the main axis (determined by flex-direction) and the cross axis (perpendicular to it). When you set display: flex on a container, its direct children become flex items that you can arrange along these axes.

The Properties That Matter Most

You really only need to learn five properties to handle 95% of layouts. The flex-direction property sets the main axis (row or column). The justify-content property aligns items along the main axis. The align-items property aligns items along the cross axis. The flex-wrap property controls whether items wrap to new lines. And gap sets spacing between items.

Common Patterns

To center something both horizontally and vertically, use display: flex; justify-content: center; align-items: center on the container. For a navigation bar with a logo on the left and links on the right, use display: flex; justify-content: space-between. For an equal-width card grid that wraps, use display: flex; flex-wrap: wrap; gap: 16px with flex: 1 1 300px on the children.

Try It Live

Our Flexbox Playground lets you experiment with all flexbox properties and see the results in real-time. Adjust direction, alignment, wrapping, gap, and item count — and copy the generated CSS when you've got the layout you want.

Flexbox vs Grid

Flexbox is best for one-dimensional layouts (a row or column of items). CSS Grid is better for two-dimensional layouts (rows and columns together). In practice, most developers use both: Grid for page-level layout, Flexbox for component-level alignment.