⚡
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.
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) = 456px3. Distribute positive free space proportional to
flex-growFrequently 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.