DevDockTools
⚡
Developer ToolsNew

Flexbox Engine Visualizer

Understand the flexbox algorithm interactively. Control flex-grow, flex-shrink, flex-basis, and alignment on a live container. See how the browser distributes free space, handles overflow, and resolves wrapping.

The flexbox algorithm distributes free space proportionally among flex items based on their flex-grow values, and shrinks overflowing items proportionally by flex-shrink × flex-basis. This visualizer shows the exact pixel math in real time as you adjust each item's flex properties.

Understanding flex-grow vs flex-basis interactionDebugging unexpected flex item sizesLearning justify-content and align-items visuallyPrototyping navigation and toolbar layouts
100% private — all processing runs in your browser. No files are uploaded to any server.

Container

Space Distribution
Container: 600px · Total gap: 24px
Total flex-basis: 120px
Free space: 456px (flex-grow distributes this)

Items

Agrow:1 shrink:1 basis:0px→ 114px
Bgrow:2 shrink:1 basis:0px→ 228px
Cgrow:0 shrink:1 basis:120px→ 120px
Dgrow:1 shrink:2 basis:0px→ 114px
Edit Item «A»
base size: 0px
final size: 114px
+114px from flex-grow

Live Preview

← main axis (row) →
A114px
B228px
C120px
D114px
Size distribution (600px total)
19%
38%
20%
19%
free

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  width: 600px;
  height: 120px;
}

.item-a {
  flex: 1 1 0px;
}

.item-b {
  flex: 2 1 0px;
}

.item-c {
  flex: 0 1 120px;
}

.item-d {
  flex: 1 2 0px;
}
Flex Algorithm (simplified)
1. Resolve flex-basis for each item → base sizes
2. Calculate free space: container - gaps - Σ(basis) = 456px
3. Distribute positive free space proportional to flex-grow

Frequently Asked Questions

What is flex-basis?

flex-basis is the item's initial main-axis size before free space is distributed. It overrides width (in row direction) or height (in column direction).

How does flex-grow work?

Free space = container size - sum of flex-basis values. Each item receives: free space * (own flex-grow / sum of all flex-grow values). Items with flex-grow: 0 don't grow.

When does flex-shrink apply?

flex-shrink only activates when items overflow their container (negative free space). Items shrink proportional to their flex-shrink * flex-basis product.

Related Tools

JSON Formatter
Format, beautify and minify JSON with syntax highlighting.
JSON Validator
Validate JSON syntax with detailed error messages and line numbers.
Base64 Encoder/Decoder
Encode and decode Base64 strings and files instantly.