Flexbox: The Complete Guide

Flexbox: The Complete Guide

Flexbox is the go-to layout tool for arranging items in a row or column — navigation bars, card grids, centered elements, and most UI patterns. Once you understand the axis model, it becomes natural.

The Mental Model

Main Axis →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→
          ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐
Cross  ↕  │ 1   │ │ 2   │ │ 3   │ │ 4   │
Axis   ↕  └─────┘ └─────┘ └─────┘ └─────┘

• flex-direction: row (default) → main axis is horizontal
• flex-direction: column → main axis is vertical
• justify-content aligns along the main axis
• align-items aligns along the cross axis

Container Properties

.container {
    display: flex;  /* or inline-flex */
    
    /* Direction */
    flex-direction: row;           /* default: left-to-right */
    flex-direction: row-reverse;   /* right-to-left */
    flex-direction: column;        /* top-to-bottom */
    flex-direction: column-reverse;
    
    /* Wrap */
    flex-wrap: nowrap;    /* default: all in one line */
    flex-wrap: wrap;      /* overflow to new lines */
    flex-wrap: wrap-reverse;
    
    /* Shorthand */
    flex-flow: row wrap;
    
    /* Main axis alignment (justify-content) */
    justify-content: flex-start;    /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between; /* gaps between items */
    justify-content: space-around;  /* gaps around items */
    justify-content: space-evenly;  /* equal gaps */
    
    /* Cross axis alignment (align-items) */
    align-items: stretch;   /* default: fill container height */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;    /* vertically center */
    align-items: baseline;  /* align text baselines */
    
    /* Multiple rows alignment (align-content) */
    align-content: flex-start;
    align-content: center;
    align-content: space-between;
    
    /* Gap between items */
    gap: 16px;          /* row and column gap */
    gap: 8px 16px;      /* row-gap column-gap */
    row-gap: 8px;
    column-gap: 16px;
}

Item Properties

.item {
    /* Flex sizing */
    flex-grow: 0;    /* default: don't grow */
    flex-grow: 1;    /* grow to fill space (proportional to value) */
    
    flex-shrink: 1;  /* default: shrink if needed */
    flex-shrink: 0;  /* never shrink */
    
    flex-basis: auto;  /* default size before growing/shrinking */
    flex-basis: 200px; /* start at 200px */
    flex-basis: 0;     /* start from nothing (grow completely fills space) */
    
    /* Shorthand: flex: grow shrink basis */
    flex: 1;          /* flex: 1 1 0 — grow, shrink, start at 0 */
    flex: auto;       /* flex: 1 1 auto */
    flex: none;       /* flex: 0 0 auto — rigid, won't grow or shrink */
    flex: 0 0 200px;  /* fixed 200px, no grow, no shrink */
    
    /* Self-alignment (overrides align-items for this item) */
    align-self: center;
    align-self: flex-start;
    align-self: flex-end;
    
    /* Reorder visually (doesn't affect HTML order or accessibility) */
    order: 0;  /* default */
    order: -1; /* moves to front */
    order: 1;  /* moves to back */
}

Common Flexbox Patterns

Perfect Centering

/* Center anything horizontally and vertically */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;  /* or any height
}

Navigation Bar

.nav {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 1rem;
}

.nav-logo {
    margin-right: auto;  /* pushes everything else to the right */
}

/* Results in: [LOGO .............. link1  link2  button] */

Card Grid

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.card {
    flex: 1 1 300px;  /* grow, shrink, start at 300px */
    max-width: 400px; /* optional: limit max width */
}
/* Cards wrap when they can't fit 300px, always fill the row */

Sticky Footer

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;  /* grows to fill all available space */
}

/* header and footer stay at their natural height */

Equal Height Columns

.columns {
    display: flex;
    gap: 2rem;
}

.column {
    flex: 1;  /* equal width */
    /* Height is automatically equal because align-items: stretch is default */
}

Responsive Sidebar + Content

.layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start; /* don't stretch to equal height */
}

.sidebar {
    flex: 0 0 250px; /* fixed 250px, never grow or shrink */
    position: sticky;
    top: 1rem;
}

.content {
    flex: 1;  /* takes all remaining space */
    min-width: 0; /* prevents overflow in flex items containing text */
}

@media (max-width: 768px) {
    .layout { flex-direction: column; }
    .sidebar { flex-basis: auto; position: static; }
}

The min-width: 0 Fix

/* Flex items have min-width: auto by default
   This prevents text/code from causing overflow */
.flex-item {
    min-width: 0;        /* allows the item to shrink below its content size */
    overflow: hidden;    /* then clip or scroll */
    text-overflow: ellipsis;
    white-space: nowrap;
}

Next lesson: CSS Grid — building any layout with two-dimensional control.