This content originally appeared on DEV Community and was authored by Safal Bhandari

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 */
}

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 */
}

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;
}

Tailwind:

<div class="flex items-center justify-center">
  <!-- centered content -->
</div>

4.2 Horizontal nav with spaced items (equal space between)

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

Tailwind:

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

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;
}

Tailwind:

<div class="flex items-stretch">
  <div class="flex-1">Column 1</div>
  <div class="flex-1">Column 2</div>
</div>

4.4 A sticky footer (flex layout)

HTML:

<body>
  <div class="page">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</body>

CSS:

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

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>

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 */
}

4.6 Variable width items with one fixed sidebar

<div class="layout">
  <aside class="sidebar">200px</aside>
  <main class="content">fluid</main>
</div>

CSS:

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

Tailwind:

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

4.7 Wrapping rows with evenly spaced content

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

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; }

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;
}

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

align-bottom mistaken for flex alignment — use items-end. (align-bottom is for table-cell contexts.)
Long words or images overflow: remember min-width:0 and overflow.
Using order without thinking about keyboard/reading order.
Assuming align-content affects single-line containers — it doesn’t.
Using margins for spacing between flex items — gap is better and simpler.
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>
  );
}

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>

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>

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>

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>

17 — TL;DR — What to Remember

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

This content originally appeared on DEV Community and was authored by Safal Bhandari

Print Share Comment Cite Upload Translate Updates

APA

Safal Bhandari | Sciencx (2025-08-19T12:41:55+00:00) The Complete Flexbox Guide — Very, Very Detailed (and Practical). Retrieved from https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/

MLA

" » The Complete Flexbox Guide — Very, Very Detailed (and Practical)." Safal Bhandari | Sciencx - Tuesday August 19, 2025, https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/

HARVARD

Safal Bhandari | Sciencx Tuesday August 19, 2025 » The Complete Flexbox Guide — Very, Very Detailed (and Practical)., viewed ,<https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/>

VANCOUVER

Safal Bhandari | Sciencx - » The Complete Flexbox Guide — Very, Very Detailed (and Practical). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/

CHICAGO

" » The Complete Flexbox Guide — Very, Very Detailed (and Practical)." Safal Bhandari | Sciencx - Accessed . https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/

IEEE

" » The Complete Flexbox Guide — Very, Very Detailed (and Practical)." Safal Bhandari | Sciencx [Online]. Available: https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/. [Accessed: ]

rf:citation

» The Complete Flexbox Guide — Very, Very Detailed (and Practical) | Safal Bhandari | Sciencx | https://www.scien.cx/2025/08/19/the-complete-flexbox-guide-very-very-detailed-and-practical/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

1 — Core Concepts (the mental model)

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

Key props explained

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

The flex shorthand

Important notes

4 — Practical Recipes & Patterns

4.1 Center an element both horizontally and vertically

4.2 Horizontal nav with spaced items (equal space between)

4.3 Equal-height columns

4.4 A sticky footer (flex layout)

4.5 Center with unknown size (perfect centering)

4.6 Variable width items with one fixed sidebar

4.7 Wrapping rows with evenly spaced content

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

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

Fixes

7 — Ordering & Source Order & Accessibility

8 — Nested Flex, Flex inside Grid, and Compositions

9 — Common Pitfalls & How to Debug

Pitfalls

Debugging tips

10 — Flexbox with React & Tailwind — Practical Examples

React component: simple card row

Example: Recreating your original layout, bottom-aligned

11 — Performance & Browser Support

12 — Accessibility Considerations

13 — Handy Cheatsheet (quick reference)

14 — Advanced Tricks & Patterns

15 — Learning Tools & Further Reading (quick list)

16 — Example Walkthroughs (3 short demos)

Demo A — Centered login form

Demo B — Responsive card grid (wrap)

Demo C — Toolbar with right-aligned actions

17 — TL;DR — What to Remember

Related Posts

The `flex` shorthand

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