CSS Flexbox: A Visual Guide

    Master the flex container, axes, alignment properties, and common layout patterns with visual examples

    CSSFlexboxLayout

    If you've ever tried to center something in CSS and nearly cried, Flexbox is your new best friend.

    Flexbox (Flexible Box Layout) is a layout system designed to help you build responsive, modern UIs without fighting floats, magic margins, or weird hacks.

    This guide will walk you visually through:

    • The flex container and flex items
    • Main axis vs cross axis (the core mental model)
    • Key properties like justify-content, align-items, flex-wrap
    • Common layouts (navbars, cards, sidebars, footers)
    • A quick Flexbox "cheat sheet" at the end

    1. The Flexbox Mental Model: Container + Items

    Everything in Flexbox starts with two roles:

    • Flex Container → The parent element
    • Flex Items → The children inside

    HTML:

    <div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

    CSS:

    .container {
  display: flex; /* turns this into a flex container */
}

    What happens:

    • ✅ All direct children (.item) become flex items
    • ✅ They line up along a main axis
    • ✅ You can control spacing, alignment, and wrapping with a few properties

    2. Axes: Main Axis vs Cross Axis (Super Important)

    Flexbox layout happens along two axes:

    • Main axis — default is horizontal (row)
    • Cross axis — perpendicular to the main axis

    Default (Row):

    .container {
  display: flex;        /* default: flex-direction: row */
}

    Main axis → left to right

    Cross axis → top to bottom

    Column Direction:

    .container {
  display: flex;
  flex-direction: column;
}

    Main axis → top to bottom

    Cross axis → left to right

    Key Insight:

    Many Flexbox properties literally mean "Align along the main axis" or "Align along the cross axis". Once you understand that, the rest feels logical.

    3. Controlling Layout on the Main Axis

    Main axis alignment is controlled with: justify-content

    .container {
  display: flex;
  justify-content: flex-start;   /* default */
  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}

    1. flex-start (default)

    All items packed to the left

    2. center

    Items centered horizontally

    3. flex-end

    All items packed to the right

    4. space-between

    First item at start, last at end, equal space between

    5. space-around

    Equal space around each item

    6. space-evenly

    Equal space between all items and edges

    Navbar Use Case:

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

    Logo on left, menu on right, perfectly centered vertically.

    4. Controlling Layout on the Cross Axis

    Cross axis alignment uses: align-items

    .container {
  display: flex;
  align-items: stretch;   /* default */
  /* stretch | flex-start | flex-end | center | baseline */
}

    flex-start

    Items align at the top of the container

    center

    Center vertically

    flex-end

    Stick to the bottom

    stretch (default)

    Each item stretches to fill container height

    5. Making Items Wrap (Responsive Rows)

    By default, Flexbox tries to keep all items on one line. To allow wrapping:

    .container {
  display: flex;
  flex-wrap: wrap;        /* allow items to go to the next line */
  gap: 1rem;              /* modern spacing between items */
}

    Simple Card Grid Example:

    .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 250px; /* grow, shrink, base width */
  background: #f7f7f7;
  padding: 16px;
  border-radius: 8px;
}

    Each card tries to be 250px wide, but can grow or shrink, and wraps when needed.

    6. The flex Shorthand: Grow, Shrink, Basis

    On the item level, you often see:

    .item {
  flex: 1;
}

    Behind the scenes, that's shorthand for:

    .item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

    flex-grow

    How much an item can grow relative to others.

    .item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }
.item-3 { flex-grow: 1; }

    Total grow = 1 + 2 + 1 = 4. .item-2 gets 2x the extra space

    flex-shrink

    How much items shrink when space is tight.

    .item { flex-shrink: 0; } /* don't shrink */

    Use it when you don't want a button or logo to shrink too small.

    flex-basis

    The initial size before grow/shrink.

    .item {
  flex: 0 0 200px;   /* fixed-width cards that can wrap */
}

    8. Common Flexbox Layout Patterns

    8.1 Centering Anything (The "Cheat Code")

    .center {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
}

    HTML:

    <div class="center" style="height: 100vh;">
  <div>Perfectly Centered!</div>
</div>

    This may be the most useful Flexbox snippet you'll ever learn.

    8.2 Navbar with Logo and Menu

    HTML:

    <nav class="navbar">
  <div class="logo">MySite</div>
  <ul class="menu">
    <li>Home</li>
    <li>Docs</li>
    <li>Pricing</li>
  </ul>
</nav>

    CSS:

    .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #111827;
  color: #f9fafb;
}

.menu {
  display: flex;
  gap: 16px;
  list-style: none;
}

    Logo on left, menu items on right, centered vertically.

    8.3 Sidebar + Main Content

    HTML:

    <div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
</div>

    CSS:

    .layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;      /* fixed 250px width */
  background: #1f2933;
  color: #fff;
}

.content {
  flex: 1;              /* take remaining space */
  padding: 24px;
}

    Classic dashboard layout.

    8.4 Equal-Height Cards

    .cards {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  background: #f3f4f6;
  padding: 16px;
}

    Flexbox automatically makes all cards the same height (stretch on cross axis).

    9. Common Flexbox Pitfalls (And Fixes)

    ❌ 1. Expecting align-items to work vertically with flex-direction: column

    Remember:

    • In row → main axis = horizontal, cross = vertical
    • In column → main axis = vertical, cross = horizontal

    For vertical spacing in a column, use justify-content, not align-items.

    ❌ 2. Forgetting flex-wrap for responsive grids

    If your cards overflow off the page, add:

    .container {
  display: flex;
  flex-wrap: wrap;
}

    ❌ 3. Using margins instead of gap

    Modern Flexbox supports gap just like CSS Grid:

    .container {
  display: flex;
  gap: 12px;
}

    Cleaner than manually juggling margin-right etc.

    10. Flexbox Cheat Sheet (Quick Reference)

    On the container:

    .container {
  display: flex;           /* activate flexbox */
  flex-direction: row;     /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap;       /* nowrap | wrap | wrap-reverse */
  justify-content: center; /* main axis: start | end | center | space-between | space-around | space-evenly */
  align-items: center;     /* cross axis: stretch | start | end | center | baseline */
  align-content: center;   /* multi-row cross-axis alignment */
  gap: 1rem;               /* spacing between items */
}

    On the items:

    .item {
  flex: 1;                 /* flex-grow flex-shrink flex-basis */
  align-self: center;      /* override align-items for single item */
  order: 1;                /* change visual order */
}

    11. How to Practice Flexbox (Easy Drills)

    1. Rebuild a Navbar

    Look at any modern site and try to recreate the header with Flexbox.

    2. Build a Pricing Section

    3 pricing cards side-by-side, equal height, responsive down to mobile.

    3. Create a Simple Dashboard Layout

    Sidebar + main content using flex: 0 0 250px and flex: 1.

    4. Centering Challenge

    Practice centering modals, loaders, and buttons using Flexbox, not position hacks.

    The more real UI you try to copy, the faster Flexbox will feel natural.

    Summary

    Flexbox is the modern way to build layouts without fighting CSS.

    Master the main axis vs cross axis mental model, and the rest becomes intuitive:

    • justify-content controls the main axis
    • align-items controls the cross axis
    • flex-wrap makes layouts responsive
    • gap handles spacing cleanly

    Practice by rebuilding real UI — navbars, cards, dashboards — and you'll become fluent fast.

    Cookie & Privacy Settings

    We use cookies to improve your experience, analyze traffic, and show personalized ads. You can manage your preferences below.

    By clicking "Accept All", you consent to our use of cookies for analytics and personalized advertising. You can customize your preferences or reject non-essential cookies.

    Privacy Policy • Terms of Service