---
title: "An Interactive Guide to Flexbox"
description: "Long-form tutorial with live editable demos explaining flexbox's algorithm, hypothetical sizes, and why flex-basis differs from width."
canonical: "https://vibing.inc/library/an-interactive-guide-to-flexbox-vg-1265"
category: "Learning & Craft"
subcategory: "Interactive guides"
license: "free"
author: "Josh W. Comeau (@joshwcomeau)"
source: "https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/"
---

# An Interactive Guide to Flexbox
Long-form tutorial with live editable demos explaining flexbox's algorithm, hypothetical sizes, and why flex-basis differs from width.
## Facts
- Source: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
- Category: Learning & Craft / Interactive guides
- Author: Josh W. Comeau (@joshwcomeau)
- Licence: free
- Tags: css, flexbox, interactive, tutorial
## Why it's a gem
Explains the flexbox *algorithm*, not the properties; the mental model most guides skip
---
Listed in The Vibeary: https://vibing.inc/library/an-interactive-guide-to-flexbox-vg-1265 · JSON: https://vibing.inc/api/public/library/gems/an-interactive-guide-to-flexbox-vg-1265