CSS Flexbox

Flexbox (the Flexible Box Layout module) is a one-dimensional layout system designed to distribute space and align items along a single axis — either a row or a column — inside a container. It replaced older, hackier techniques like floats and inline-block for common layout tasks such as navigation bars, centering content, and evenly spacing items.

Flexbox works through a parent/child relationship: you turn an element into a "flex container" with display: flex, and its direct children automatically become "flex items" that respond to a specific set of alignment and sizing properties.

Why it matters

Flexbox made the layouts that used to need hacks straightforward: a row of items with space between them, vertical centring, columns of equal height. Navigation bars, toolbars, cards and form rows are almost always flex containers. It is the layout tool you will use most often.

Flex Container Properties

These properties are set on the parent element to control the overall layout of its children.

• flex-direction — sets the main axis: row (default, left-to-right), column, row-reverse, or column-reverse.
• justify-content — aligns items along the main axis: flex-start, flex-end, center, space-between, space-around, or space-evenly.
• align-items — aligns items along the cross axis (perpendicular to the main axis): flex-start, flex-end, center, stretch (default), or baseline.
• flex-wrap — controls whether items wrap onto multiple lines (wrap) or are forced onto one line and potentially overflow (nowrap, the default).

Flex Item Properties

These properties are set on the children to control how each individual item grows, shrinks, and sizes itself relative to its siblings.

• flex-grow — a unitless number defining how much of the remaining free space an item should consume relative to its siblings; 0 (default) means it won't grow.
• flex-shrink — defines how much an item should shrink relative to siblings when there isn't enough space; 1 is the default, 0 prevents shrinking.
• flex-basis — sets the item's initial size before growing or shrinking is calculated, similar to width but flex-aware.
• flex shorthand — combines all three: flex: 1 1 0; is a common pattern meaning "grow and shrink equally from a zero base," producing evenly sized items.

Examples

<!--
<nav class="navbar">
  <span class="logo">Brand</span>
  <div class="links"><a href="#">Home</a><a href="#">About</a></div>
</nav>
-->

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

The logo sits at the far left and the links group sits at the far right, both vertically centered within the navbar regardless of their differing heights.

.row {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1 1 0; /* grow equally, shrink equally, start from zero basis */
}

The three columns split the available width evenly, and if the container is resized, all three columns shrink or grow together while staying equal in width.

Exercise

Turn main into a flex container so that the heading, the paragraph and the button sit in one row, centred vertically, with 16px between them, and with the button pushed to the far right.

Expected result: heading and paragraph on the left, the button at the right edge, all aligned on their vertical centres.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  /* TODO: a flex row, centred vertically, with a 16px gap */
}

button {
  /* TODO: push the button to the far right */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  display: flex;
  align-items: center;
  gap: 16px;
}

button {
  margin-left: auto;
}

Quick quiz

Interview questions