What is Flexbox?

Flexbox (Flexible Box Layout) arranges items in a row or column along a main axis. It’s ideal for navigation bars, card rows, centering content, and distributing space within a container.

Flexbox is one-dimensional — use CSS Grid when you need simultaneous row and column control.

Enable Flexbox 

  .container {
    display: flex;
}

Child elements become flex items. Text nodes wrapped in anonymous flex items if direct children are text.

Direction and Wrapping 

  .container {
    display: flex;
    flex-direction: row;        /* row | row-reverse | column | column-reverse */
    flex-wrap: wrap;            /* nowrap | wrap | wrap-reverse */
    gap: 16px;                  /* space between items — preferred over margins */
}

Shorthand: flex-flow: row wrap;

Main Axis vs Cross Axis

flex-direction Main axis Cross axis
row (default) Horizontal → Vertical ↓
column Vertical ↓ Horizontal →

Justify Content (Main Axis) 

  .container {
    justify-content: center;
    /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}
  • space-between — items at edges, equal gaps between
  • space-evenly — equal space around all items including edges

Align Items (Cross Axis) 

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

stretch (default) makes items fill cross-axis size unless they have explicit height/width.

Align Content (Multi-line)

When flex-wrap: wrap creates multiple lines:

  .container {
    align-content: center;
    /* flex-start | flex-end | center | space-between | space-around | stretch */
}

Flex Item Properties 

  .item {
    flex-grow: 1;      /* grow to fill available space (0 = don't grow) */
    flex-shrink: 1;    /* shrink below content size (0 = don't shrink) */
    flex-basis: 200px; /* initial size before grow/shrink */
    flex: 1 0 200px;   /* shorthand: grow shrink basis */
    align-self: flex-end; /* override container align-items for one item */
    order: 2;          /* visual reorder — avoid for accessibility */
}

Common pattern: flex: 1 means flex: 1 1 0% — equal-width columns.

Common Patterns

Center Everything 

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}
nav ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

Holy Grail Layout 

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page main {
    flex: 1; /* pushes footer to bottom */
}

Equal-Height Cards 

  .card-row {
    display: flex;
    gap: 1rem;
}
.card {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-body { flex: 1; }

Flexbox vs Grid Quick Reference

Task Use
Navbar, toolbar Flexbox
Centering Flexbox
Equal columns in one row Flexbox or Grid
Full page layout Grid
2D gallery Grid

Troubleshooting

Items overflow container

  • Set flex-shrink: 1 (default) or min-width: 0 on items with long text
  • Use flex-wrap: wrap

Gap not working in old browsers

  • Use margins as fallback; gap supported in all modern browsers

Last item not aligning right

  • Use margin-left: auto on last item, or justify-content: space-between

Equal columns unequal width

  • Set flex-basis: 0 with flex-grow: 1 for true equal distribution

Flexbox handles most one-dimensional layout needs. Pair it with CSS Grid for complete layout mastery.