DEV Community

Safal Bhandari
Safal Bhandari

Posted on

The Complete Flexbox Guide — Very, Very Detailed (and Practical)

Flexbox (CSS Flexible Box Layout) is a powerful, modern layout system for arranging elements in one dimension — either a row or a column. It’s designed to make complex layouts (centering, equal-height items, ordering, wrapping) simple and predictable. Below is a thorough, practical guide that covers everything from fundamentals to advanced patterns, Tailwind usage, debugging tips, accessibility, and real-world recipes.

1 — Core Concepts (the mental model)

  • Axis

    • Main axis — primary direction of layout (row or column). Items are laid out along this axis.
    • Cross axis — perpendicular to the main axis.

  • Flex container — the element with display: flex or display: inline-flex. Its children become flex items.

  • Flex items — direct children of a flex container. They participate in flex layout.

  • Main size vs Cross size

    • If flex-direction: row → main axis = horizontal → main size = width, cross size = height.
    • If flex-direction: column → main axis = vertical → main size = height, cross size = width.

2 — Flex Container Properties (what you put on the parent) 

.container {
  display: flex;               /* or inline-flex */
  flex-direction: row;         /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap;           /* nowrap | wrap | wrap-reverse */
  justify-content: flex-start; /* align along main axis */
  align-items: stretch;        /* align along cross axis for items */
  align-content: stretch;      /* extra: aligns rows when wrapping */
  gap: 16px;                   /* space between items */
}
Enter fullscreen mode Exit fullscreen mode

Key props explained

  • display: flex | inline-flex

    • flex → block-level flex container (fills width by default).
    • inline-flex → inline-level container (wraps to content like inline elements).

  • flex-direction

    • row (default): left → right main axis.
    • row-reverse: right → left.
    • column: top → bottom (main axis vertical).
    • column-reverse: bottom → top.

  • flex-wrap

    • nowrap (default): all items in single line, can shrink.
    • wrap: items break into multiple lines.
    • wrap-reverse: lines in reverse order.

  • justify-content (main axis)

    • flex-start, center, flex-end, space-between, space-around, space-evenly.

  • align-items (cross axis)

    • stretch (default), flex-start, center, flex-end, baseline.

  • align-content (multi-line cross-axis alignment when wrapping)

    • Similar values to justify-content but for stacked lines: flex-start, center, space-between, stretch, etc.

  • gap (and row-gap / column-gap)

    • Adds consistent spacing between items without margin hacks.

3 — Flex Item Properties (what you put on the children) 

.item {
  order: 0;                 /* control visual order */
  flex-grow: 0;             /* grow factor */
  flex-shrink: 1;           /* shrink factor */
  flex-basis: auto;         /* initial main size */
  align-self: auto;         /* override align-items for single item */
  min-width: 0;             /* important for overflowing children */
}
Enter fullscreen mode Exit fullscreen mode

The flex shorthand

flex: <grow> <shrink> <basis>; — most common usage:

  • flex: 1 → flex-grow: 1; flex-shrink: 1; flex-basis: 0% (commonly used to create equal-width items).
  • flex: 0 1 auto → equivalent to default (don’t grow; shrink as needed).
  • flex: 0 0 200px → fixed 200px width in main axis.

Important notes

  • order changes only visual order; it doesn’t change DOM order (affects accessibility/reading order).
  • min-width: 0 or min-height: 0 is often necessary to prevent overflowing when children have intrinsic sizes (e.g., long words or images).
  • align-self allows a flex item to opt out of the container’s align-items.

4 — Practical Recipes & Patterns

Below are common tasks and how to solve them.

4.1 Center an element both horizontally and vertically 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<div class="flex items-center justify-center">
  <!-- centered content -->
</div>
Enter fullscreen mode Exit fullscreen mode

4.2 Horizontal nav with spaced items (equal space between) 

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<nav class="flex items-center justify-between">
  <div>Logo</div>
  <ul class="flex gap-4"> ...links... </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

4.3 Equal-height columns

Flexbox makes columns equal height automatically when they’re flex items and the container has a cross size.

.row {
  display: flex;
  align-items: stretch;
}
.col {
  flex: 1;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<div class="flex items-stretch">
  <div class="flex-1">Column 1</div>
  <div class="flex-1">Column 2</div>
</div>
Enter fullscreen mode Exit fullscreen mode

4.4 A sticky footer (flex layout)

HTML:

<body>
  <div class="page">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS:

html, body { height: 100%; margin: 0; }
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1; /* pushes footer to bottom */
}
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<body class="min-h-screen">
  <div class="flex flex-col min-h-screen">
    <header>...</header>
    <main class="flex-1">...</main>
    <footer>...</footer>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

4.5 Center with unknown size (perfect centering)

If you don’t know the element size:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* for full viewport */
}
Enter fullscreen mode Exit fullscreen mode

4.6 Variable width items with one fixed sidebar 

<div class="layout">
  <aside class="sidebar">200px</aside>
  <main class="content">fluid</main>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

.layout { display: flex; }
.sidebar { flex: 0 0 200px; } /* fixed 200px */
.content { flex: 1 1 auto; } /* takes rest */
Enter fullscreen mode Exit fullscreen mode

Tailwind:

<div class="flex">
  <aside class="flex-none w-52">200px</aside>
  <main class="flex-1">fluid</main>
</div>
Enter fullscreen mode Exit fullscreen mode

4.7 Wrapping rows with evenly spaced content 

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center; /* or space-around */
}
Enter fullscreen mode Exit fullscreen mode

5 — Advanced Alignment: align-items vs align-content vs align-self

  • align-items aligns flex items on the cross axis within each line.
  • align-content aligns entire lines (affects only when there is wrapping and extra space in cross axis).
  • align-self on a flex item overrides align-items for that item.

Example:

.container { display:flex; flex-wrap:wrap; align-items:center; align-content:space-between; }
.item { align-self:flex-start; }
Enter fullscreen mode Exit fullscreen mode

6 — Intrinsic Sizing, Min/Max, and the Shrink Problem

Flex items can shrink or grow based on flex-shrink and flex-grow. But sometimes content inside an item (long text, images) prevents shrinking and overflows the container.

Fixes

  • Set min-width: 0 or min-height: 0 on the flex item to allow it to shrink below intrinsic content size.
  • Use overflow: hidden or text-overflow: ellipsis for text.
  • Use max-width or flex-basis to constrain. 
.item {
  min-width: 0; /* allow child to shrink */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

7 — Ordering & Source Order & Accessibility

  • order controls visual order but does not change DOM order.
  • Screen readers and keyboard navigation follow DOM order — be careful using order to change reading order.
  • If you need different visual/layout order but same DOM order for accessibility, use margins/absolute positioning or restructure DOM.

8 — Nested Flex, Flex inside Grid, and Compositions

  • Nesting flex containers is common: children of a flex item can themselves be flex containers.
  • Flex + Grid: use Grid for 2D layout, Flex for 1D layout pieces (nav, toolbars, item rows).
  • Avoid deeply nested flex when not required — it can complicate layout logic.

9 — Common Pitfalls & How to Debug

Pitfalls

  1. align-bottom mistaken for flex alignment — use items-end. (align-bottom is for table-cell contexts.)
  2. Long words or images overflow: remember min-width:0 and overflow.
  3. Using order without thinking about keyboard/reading order.
  4. Assuming align-content affects single-line containers — it doesn’t.
  5. Using margins for spacing between flex items — gap is better and simpler.
  6. Not setting box-sizing: border-box can cause sizing surprises.

Debugging tips

  • Toggle outline: 2px solid red; on elements to visualize boxes.
  • Use DevTools Layout pane (Chrome/Firefox) — shows flexbox guides, axes, and gaps.
  • Temporarily add background-color or border to identify which element is causing overflow.

10 — Flexbox with React & Tailwind — Practical Examples

React component: simple card row 

function CardRow() {
  return (
    <div className="flex gap-4 items-stretch">
      <div className="flex-1 p-4 border rounded">Card 1</div>
      <div className="flex-1 p-4 border rounded">Card 2</div>
      <div className="flex-1 p-4 border rounded">Card 3</div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Example: Recreating your original layout, bottom-aligned

Original used align-bottom (nonfunctional). Correct Tailwind:

<div className='m-4'>
  <div className='w-4/5 h-[700px] border-[10px] border-[#0f172a] flex justify-around items-end'>
    <div className='w-[150px] h-[150px] bg-[#fb7185] p-4 font-bold text-[#f1f5f9] text-center border-[10px] border-[#e11d48] rounded-[10px]'>
      Item 1
    </div>
    <div className='w-[150px] h-[150px] bg-[#fb7185] p-4 font-bold text-[#f1f5f9] text-center border-[10px] border-[#e11d48] rounded-[10px]'>
      Item 2
    </div>
    <div className='w-[150px] h-[150px] bg-[#fb7185] p-4 font-bold text-[#f1f5f9] text-center border-[10px] border-[#e11d48] rounded-[10px]'>
      Item 3
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

11 — Performance & Browser Support

  • Flexbox is well-supported across modern browsers (including evergreen desktop/mobile browsers).
  • Performance: flex calculations are fast; avoid expensive repaints (e.g., avoid toggling layout properties in large lists frequently).
  • For lists with many elements, consider virtualization (not a flexbox issue but relevant).

12 — Accessibility Considerations

  • Don’t use order to fix layout when it changes logical reading order — keep DOM order meaningful.
  • Ensure keyboard focus order matches visual order or provide skip links.
  • Use semantic elements (nav, main, footer, ul, li) inside flex containers — semantics trump layout.
  • For dynamic content changes, announce updates via ARIA live regions if needed.

13 — Handy Cheatsheet (quick reference)

  • Parent (flex container)

    • display: flex;
    • flex-direction: row | column | row-reverse | column-reverse
    • flex-wrap: nowrap | wrap | wrap-reverse
    • justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
    • align-items: stretch | flex-start | center | flex-end | baseline
    • align-content: stretch | center | flex-start | flex-end | space-between | space-around
    • gap: <length>

  • Child (flex item)

    • flex: <grow> <shrink> <basis>
    • order: <number>
    • align-self: auto | flex-start | flex-end | center | baseline | stretch
    • min-width: 0 (often necessary)

14 — Advanced Tricks & Patterns

  • Flexbox Holy Grail layout: header, footer, two sidebars, fluid center — use nested flex or grid + flex combinations.
  • Centering with unknown child size: display:flex; align-items:center; justify-content:center;
  • Equalizing heights with wrap: nest a flex container in each card and use items-stretch.
  • Fluid gutters: use gap across breakpoints — easier than margins.
  • Flexbox for responsive galleries: use flex-wrap: wrap; gap: and flex: 1 0 calc(33.333% - gap) to create responsive rows.

15 — Learning Tools & Further Reading (quick list)

  • MDN Flexbox guide — canonical reference.
  • Flexbox Froggy — gamified practice.
  • CSS-Tricks “A Complete Guide to Flexbox” — visual cheat sheet.
  • Browser DevTools (Layout tab) — visualize flex axes and gaps.

16 — Example Walkthroughs (3 short demos)

Demo A — Centered login form 

<div class="h-screen flex items-center justify-center">
  <form class="w-full max-w-sm p-6 border rounded">
    <h2 class="text-xl mb-4">Login</h2>
    <input class="w-full mb-2 p-2" placeholder="Email" />
    <input class="w-full mb-4 p-2" placeholder="Password" />
    <button class="w-full p-2">Sign in</button>
  </form>
</div>
Enter fullscreen mode Exit fullscreen mode

Demo B — Responsive card grid (wrap) 

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[250px]">Card 1</div>
  <div class="flex-1 min-w-[250px]">Card 2</div>
  <div class="flex-1 min-w-[250px]">Card 3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Demo C — Toolbar with right-aligned actions 

<div class="flex items-center justify-between p-4">
  <div class="flex items-center gap-3">
    <img src="/logo.png" class="w-8 h-8" />
    <span>My App</span>
  </div>
  <div class="flex items-center gap-2">
    <button>Log in</button>
    <button>Sign up</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

17 — TL;DR — What to Remember

  1. display:flex puts children on a one-dimensional axis.
  2. Use justify-* for main-axis alignment, items-* for cross-axis alignment.
  3. gap replaces margin hacks for spacing.
  4. Use flex shorthand (flex: 1) to make items share space equally.
  5. min-width: 0 is your friend when children overflow.
  6. order changes visual order only — watch accessibility.
  7. For two-dimensional layouts, prefer CSS Grid; use Flexbox for rows/columns and component-level layout.

Top comments (0)