• Chapter 3 — CSS Flexbox
  • The Problem Flexbox Solves
  • How to Turn On Flexbox
  • The Two Axes
  • flex-direction — Which Way Do Children Go?
  • justify-content — Position Along the Main Axis
  • align-items — Position Along the Cross Axis
  • Perfect Centering — The Most Useful Combo
  • gap — Space Between Children
  • flex-wrap — What Happens When Children Don’t Fit?
  • Properties on Children
    • flex — How Much Space to Take
    • align-self — Override Alignment for One Child
  • Real Example — Navigation Bar
  • Flexbox Cheatsheet

§Chapter 3 — CSS Flexbox

§The Problem Flexbox Solves

By default, HTML elements stack vertically. Most real layouts need things side by side, centered, or spaced out. Flexbox makes this easy.

§How to Turn On Flexbox

Apply it to the parent (the container):

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

.container {
  display: flex;  /* this one line activates flexbox */
}

Just that one line turns vertical stacking into a row.

💡 Key mental model: Flexbox is always parent controls children. You write flexbox rules on the parent, not the children.

§The Two Axes

────────────────────────→  Main axis (horizontal, left to right by default)
│
│
↓  Cross axis (vertical, top to bottom)

§flex-direction — Which Way Do Children Go?

.container {
  display: flex;
  flex-direction: row;            /* default — left to right */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column;         /* top to bottom */
  flex-direction: column-reverse; /* bottom to top */
}

§justify-content — Position Along the Main Axis

.container {
  display: flex;
  justify-content: flex-start;    /* pack to the left (default) */
  justify-content: flex-end;      /* pack to the right */
  justify-content: center;        /* center everything */
  justify-content: space-between; /* equal gaps BETWEEN items */
  justify-content: space-around;  /* equal space around each item */
  justify-content: space-evenly;  /* perfectly equal space everywhere */
}

§align-items — Position Along the Cross Axis

.container {
  display: flex;
  align-items: stretch;     /* children fill full height (default) */
  align-items: flex-start;  /* align to top */
  align-items: flex-end;    /* align to bottom */
  align-items: center;      /* center vertically */
}

§Perfect Centering — The Most Useful Combo

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Three lines. Perfectly centered both horizontally and vertically.

§gap — Space Between Children

.container {
  display: flex;
  gap: 20px;        /* same gap in all directions */
  row-gap: 10px;    /* vertical gap only */
  column-gap: 20px; /* horizontal gap only */
}

§flex-wrap — What Happens When Children Don’t Fit?

.container {
  display: flex;
  flex-wrap: wrap; /* children wrap to next line when no space */
}

§Properties on Children

§flex — How Much Space to Take

.box { flex: 1; }  /* grow and fill available space equally */

If one has flex: 2, it gets double the space:

┌────────────────────┬──────────┬──────────┐
│      flex: 2       │  flex:1  │  flex:1  │
└────────────────────┴──────────┴──────────┘

§align-self — Override Alignment for One Child

.special-box {
  align-self: flex-end;
}

§Real Example — Navigation Bar

<nav class="navbar">
  <div class="logo">MyApp</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* logo left, links right */
  align-items: center;            /* vertically centered */
  padding: 16px 32px;
  background-color: #1a1a2e;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

§Flexbox Cheatsheet

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026