BeingXpert Learn & Build Future

25. CSS Flexbox

What you will learn

  • What Flexbox is and when to use it
  • The container and item properties
  • How to align, space, and wrap items
  • How to build a centred layout and a simple card row

What is Flexbox?

Flexbox is a layout system for arranging items in a single line, either a row or a column. It makes alignment, spacing, and equal sizing simple. You turn it on by setting display: flex on a container. Its direct children become flex items.

Example

<style>
  .row {
    display: flex;
    gap: 10px;
  }
  .row div {
    background-color: #0d6efd;
    color: white;
    padding: 16px;
  }
</style>

<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Output

One
Two
Three

Container properties

Property What it does Common values
flex-direction The main axis row (default), column
justify-content Spacing along the main axis flex-start, center, flex-end, space-between, space-around
align-items Alignment across the other axis stretch (default), center, flex-start, flex-end
flex-wrap Whether items wrap onto new lines nowrap (default), wrap
gap Space between items 10px, 1rem

Centring anything

Flexbox finally made vertical centring easy.

Example

<style>
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    background-color: #eaf5ff;
    border: 1px solid #cfe6ff;
  }
</style>

<div class="center">
  <p>Perfectly centred</p>
</div>

Output

Perfectly centred

Spacing items: a navigation bar

Example

<style>
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #082b59;
    color: white;
    padding: 10px 16px;
  }
</style>

<div class="nav">
  <strong>MySite</strong>
  <span>Home</span>
  <span>About</span>
</div>

Output

MySiteHomeAbout

Item properties

Property What it does
flex-grow How much spare space an item takes (0 by default)
flex-shrink How readily it shrinks when space is short (1 by default)
flex-basis Its starting size before growing or shrinking
flex Shorthand for the three, such as flex: 1
align-self Overrides align-items for one item
order Changes visual order. Take care: keyboard and screen reader order does not change

Example

<style>
  .layout { display: flex; gap: 10px; }
  .side { flex: 0 0 120px; background-color: #cfe6ff; padding: 12px; }
  .main { flex: 1; background-color: #eaf5ff; padding: 12px; }
</style>

<div class="layout">
  <div class="side">Sidebar (fixed 120px)</div>
  <div class="main">Main area (takes the rest)</div>
</div>

Output

Sidebar (fixed 120px)
Main area (takes the rest)

Wrapping cards

With flex-wrap: wrap and a flexible basis, cards sit in a row and drop to the next line when space runs out.

Example

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 12px; }
  .card {
    flex: 1 1 140px;
    background-color: #eaf5ff;
    border: 1px solid #cfe6ff;
    border-radius: 8px;
    padding: 14px;
  }
</style>

<div class="cards">
  <div class="card">HTML</div>
  <div class="card">CSS</div>
  <div class="card">JavaScript</div>
  <div class="card">PHP</div>
</div>

Output

HTML
CSS
JavaScript
PHP

Remember the two axes. justify-content works along the main axis (the direction of the row or column) and align-items works across it. If you set flex-direction: column, the two swap roles.

Common mistakes

  • Putting display: flex on the items instead of on their container.
  • Mixing up justify-content and align-items, especially in a column.
  • Expecting align-items: center to centre vertically with no height set on the container.
  • Using order in a way that makes the tab order confusing.

Exercise

Make .bar a flex container that puts its two items at opposite ends, vertically centred, with 12px of padding and a background of #eaf5ff.

Show solution 
<style>
  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #eaf5ff;
  }
</style>
<div class="bar">
  <span>Logo</span>
  <span>Menu</span>
</div>

Knowledge check

1. Which element gets display: flex?

The container (the parent of the items).

2. Which property spaces items along the main axis?

justify-content

3. What does flex: 1 on an item do?

It lets the item grow to share the available space.

Summary

  • Flexbox arranges items in one row or column.
  • Use justify-content and align-items to space and align them.
  • gap, flex-wrap, and flex: 1 make flexible card layouts.
Scroll to Top