CSS Flexbox

Flexbox Intro

Flexbox (the Flexible Box Layout) is a CSS layout model designed to arrange items in a single row or a single column, distributing space between them and aligning them predictably. It replaces older hacks like floats and inline-block for one-dimensional layouts.

What is Flexbox?

Flexbox is a one-dimensional layout system. That means it lays out content along one axis at a time: either as a row (horizontal) or as a column (vertical). It excels at distributing free space and aligning items, even when their sizes are unknown or dynamic.

To use flexbox you need two ingredients: a flex container (the parent element you set display:flex on) and flex items (its direct children, which automatically become flexible).

Turning an element into a flex container

.container {
  display: flex; /* children become flex items */
}

The Main Axis and the Cross Axis

Every flex container has two axes. The main axis is the direction items are laid out along, set by flex-direction. The cross axis runs perpendicular to it. Understanding these two axes is the key to flexbox, because different properties align items along different axes.

Main axis: the primary direction of flow. With flex-direction:row it runs left to right; with column it runs top to bottom.
Cross axis: always perpendicular to the main axis.
justify-content aligns items along the MAIN axis.
align-items aligns items along the CROSS axis.

💡

A quick memory aid: JUSTIFY handles the MAIN axis, ALIGN handles the CROSS axis. Change flex-direction and these two swap their visual direction.

A First Runnable Example

In the example below, three coloured boxes become flex items. Because the container is display:flex, they sit side by side in a row instead of stacking. Press Run and watch them line up horizontally.

Three flex items in a row — click Run

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-demo {
    display: flex;
    gap: 12px;
    background: #e2e8f0;
    padding: 12px;
  }
  .box {
    background: #6366f1;
    color: #fff;
    padding: 24px;
    font-family: sans-serif;
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
  }
  .box.b { background: #ec4899; }
  .box.c { background: #14b8a6; }
</style>
</head>
<body>
  <div class="flex-demo">
    <div class="box a">1</div>
    <div class="box b">2</div>
    <div class="box c">3</div>
  </div>
</body>
</html>

Row vs Column

The next example places two containers on the page: one is a row, the other a column. This makes the main axis visible. Notice how the same markup flows differently just by changing flex-direction.

Compare row and column direction

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .wrap { font-family: sans-serif; }
  .row, .col {
    display: flex;
    gap: 10px;
    background: #f1f5f9;
    padding: 10px;
    margin-bottom: 16px;
  }
  .col { flex-direction: column; }
  .item {
    background: #0ea5e9;
    color: #fff;
    padding: 18px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
  }
</style>
</head>
<body>
  <div class="wrap">
    <p>flex-direction: row (main axis is horizontal)</p>
    <div class="row">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>
    <p>flex-direction: column (main axis is vertical)</p>
    <div class="col">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>
  </div>
</body>
</html>

When to Reach for Flexbox

Use flexbox when	Prefer CSS Grid when
Aligning items in a single row or column	Laying out both rows and columns together
Building navbars, toolbars, button groups	Building page-level or card-grid layouts
Centring one element inside another	Placing items into named template areas
Content size should drive the layout	The layout structure should drive content

ℹ️

Flexbox and Grid are complementary, not competitors. Many real pages use Grid for the overall structure and Flexbox inside individual components.

Key Points

Flexbox is a one-dimensional layout model (a row OR a column).
display:flex on a parent creates a flex container; its direct children become flex items.
The main axis is set by flex-direction; the cross axis is perpendicular to it.
justify-content aligns along the main axis; align-items aligns along the cross axis.
Use flexbox for components and Grid for two-dimensional page layouts.