EasyCode365EasyCode365

Introduction to CSS Flexbox

Flexbox is a CSS layout tool for arranging items in a row or a column.

It helps you place boxes side by side, center content, add even spacing, wrap items to a new line, and share available space between items.

In this lesson, you will learn the beginner basics of Flexbox: containers, items, direction, alignment, wrapping, spacing, and proportions.

Why Flexbox exists

Before Flexbox, developers often used floats, inline-block, or positioning to create layouts.

Those tools can work, but they were not designed for flexible interface layout. Flexbox was created to make one-dimensional layouts easier.

One-dimensional means layout in one main direction at a time:

  • a row
  • a column

For full two-dimensional page layouts, CSS Grid is often a better tool. For rows, columns, navigation bars, toolbars, and card groups, Flexbox is usually a strong choice.

What a flex container is

A flex container is the parent element that controls a Flexbox layout.

You create one by adding display: flex to the parent.

Read-only

The container decides how its direct children are placed, spaced, aligned, and sized.

What flex items are

Flex items are the direct children of a flex container.

Only direct children become flex items. Elements nested deeper inside those children are not flex items unless their own parent also uses display: flex.

Read-only
<div class="container">
  <div>Flex item</div>
  <div>Flex item</div>
</div>

The parent is the flex container. The two direct child <div> elements are flex items.

Turning on Flexbox with display: flex

The smallest Flexbox example needs one rule on the parent: display: flex.

By default, flex items line up in a row.

Can edit
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<style>
  .container {
    display: flex;
    padding: 12px;
    background-color: #e5e7eb;
    font-family: Arial, sans-serif;
  }

  .box {
    padding: 16px;
    margin: 4px;
    background-color: #2563eb;
    color: white;
    border-radius: 6px;
  }
</style>

The three boxes become a row because the parent is now a flex container.

Main axis and cross axis

Flexbox uses two important directions:

  • The main axis is the direction the flex items follow.
  • The cross axis is the direction across the main axis.

With the default flex-direction: row, the main axis runs left to right, and the cross axis runs top to bottom.

If you change to flex-direction: column, the axes switch. The main axis becomes vertical, and the cross axis becomes horizontal.

Direction with flex-direction

The flex-direction property controls the main direction of the flex items.

Common values:

  • row: items sit in a horizontal row. This is the default.
  • column: items stack in a vertical column.
Can edit
<div class="row-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="column-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .row-layout,
  .column-layout {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .row-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .column-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .item {
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    text-align: center;
  }
</style>

Changing flex-direction changes the main axis, which also changes how alignment works.

This example uses align-items: flex-start so the column items keep their natural width instead of stretching across the container.

Main-axis alignment with justify-content

justify-content aligns flex items along the main axis.

With the default row direction, this usually means horizontal alignment.

Common values:

  • flex-start: items stay at the start.
  • center: items move to the center.
  • flex-end: items move to the end.
  • space-between: first item goes to the start, last item goes to the end, and the space is spread between them.
  • space-around: each item gets equal space around it.
  • space-evenly: the spacing between items and at the edges is equal.
Can edit
<div class="toolbar">
  <button>Back</button>
  <button>Save</button>
  <button>Next</button>
</div>

<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .toolbar button {
    padding: 8px 12px;
  }
</style>

Try changing space-between to center to see the buttons move along the main axis.

Cross-axis alignment with align-items

align-items aligns flex items along the cross axis.

With the default row direction, this usually means vertical alignment.

By default, align-items is set to stretch, which makes items grow to fill the cross axis (for example, equal heights in a row). Set a value like center to align items without stretching them.

Can edit
<div class="panel">
  <div class="tile small">Small</div>
  <div class="tile tall">Tall</div>
  <div class="tile small">Small</div>
</div>

<style>
  .panel {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 140px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .tile {
    width: 80px;
    display: grid;
    place-items: center;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .small {
    height: 48px;
  }

  .tall {
    height: 96px;
  }
</style>

The items are vertically centered because align-items works across the main direction.

Spacing with gap

The gap property adds space between flex items.

It is usually cleaner than adding margins to every item.

Can edit
<div class="link-row">
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</div>

<style>
  .link-row {
    display: flex;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .link-row span {
    padding: 8px 12px;
    background-color: #eef2ff;
    border: 1px solid #4f46e5;
    border-radius: 999px;
  }
</style>

gap creates space only between the items. It does not add extra space before the first item or after the last item.

Wrapping with flex-wrap

By default, flex items try to stay on one line.

If the container becomes too narrow, the items may squeeze or overflow. Use flex-wrap: wrap to let items move onto new lines.

Can edit
<div class="badge-list">
  <span>Selectors</span>
  <span>Box model</span>
  <span>Typography</span>
  <span>Forms</span>
  <span>Flexbox</span>
</div>

<style>
  .badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    background: #cccccc;
  }

  .badge-list span {
    padding: 8px 12px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 999px;
  }
</style>

Wrapping is useful for tags, button groups, and card rows that need to work on smaller screens.

Proportions with flex

The flex property controls how flex items grow and shrink.

A simple beginner pattern is flex: 1. If all items use flex: 1, they share the available space equally.

Can edit
<div class="columns">
  <div class="column">One</div>
  <div class="column">Two</div>
  <div class="column">Three</div>
</div>

<style>
  .columns {
    display: flex;
    gap: 10px;
    font-family: Arial, sans-serif;
  }

  .column {
    flex: 1;
    padding: 20px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    text-align: center;
  }
</style>

Each column takes an equal share of the row.

Common beginner mistakes

  • Putting container properties on the item: justify-content, align-items, gap, and flex-wrap usually belong on the flex container.
  • Forgetting the axes can change: justify-content follows the main axis, not always the horizontal direction.
  • Expecting every nested element to be a flex item: only direct children of the flex container become flex items.
  • Using margins instead of gap: gap is simpler for spacing between flex items.
  • Using Flexbox for every layout: Flexbox is great for one direction. Grid is often better for two-dimensional layouts.

Mini practice task

Look at this CSS rule:

Read-only

If there are two buttons inside .menu, where will they appear?

Check the quiz answers when you are ready.

Short quiz with answers

  1. Which CSS property turns a parent into a flex container?
  2. Does align-items work along the main axis or the cross axis?
  3. Which property allows flex items to move onto a new line?

Answers:

  1. display: flex.
  2. The cross axis.
  3. flex-wrap.

Mini practice task answer: the first button moves to the start of the container, and the second button moves to the end, with empty space between them.

Small challenge

Build a simple navigation bar with Flexbox.

Your goals:

  • Turn .navbar into a flex container.
  • Push the links to the right side.
  • Add a 15px gap between the links.
Can edit
<nav class="navbar">
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Home</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">About</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Contact</a>
</nav>

<style>
  .navbar {
    padding: 20px;
    background-color: #1f2937;
    font-family: Arial, sans-serif;
    /* Turn on Flexbox */

    /* Push links to the right */

    /* Add a 15px gap */
  }

  .nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
</style>

Summary

  • display: flex turns a parent into a flex container.
  • Direct children of a flex container become flex items.
  • Flexbox works in one main direction at a time: row or column.
  • The main axis follows flex-direction.
  • The cross axis runs across the main axis.
  • justify-content aligns items along the main axis.
  • align-items aligns items along the cross axis.
  • gap creates clean space between flex items.
  • flex-wrap: wrap lets items move onto new lines.
  • flex: 1 lets items share available space equally.
  • Flexbox is better than floats for many one-dimensional layouts, but Grid is often better for two-dimensional layouts.