/* ❌ Manual width calculations */
.toolbar button {
width: calc(100% / 3);
}
/* Breaks when adding a 4th button */
/* ✅ Flexbox distributes space */
.toolbar {
display: flex;
gap: 1rem;
}
.toolbar button {
flex: 1;
}
3 buttons, equal space. No calculations.
"The Tao of heaven bends the bow:
the top is lowered, the bottom is raised."
Resize window → buttons stretch/shrink equally; no calc, no JS.