Layout with Flexbox

In this lesson you'll learn the basics of layout using CSS's Flexbox, so you can arrange elements side by side. This is for people searching "CSS Flexbox usage" or "display flex for beginners."

Using display: flex; lets you easily arrange elements side by side (or stacked vertically). Adjusting layouts used to be difficult work, but with Flexbox, you can intuitively specify how elements are arranged, spaced, and aligned in short, concise code.

The sample code specifies display: flex; gap: 12px; on .box-row, arranging three .box elements side by side. You can also see how gap adds space between elements, and how each box with flex: 1; lines up with an equal width.

A common beginner stumbling block is that you need to specify display: flex on the parent element (.box-row). Specifying it on the child elements (.box) instead has no effect, so you need to be conscious of "which element should this go on." Combined with justify-content or align-items, centering and even spacing are also easy to achieve.

This is an extremely commonly used technique on real websites — header menus, rows of cards, and more. Most modern web design builds its layout on top of either Flexbox or CSS Grid.