5 Flexbox math

Flexbox layout is presented as a mathematical system rather than a mysterious one, and the chapter explains how browsers decide the starting size of each flex item before any expansion or contraction happens. That starting point, called the flex base size, comes from flex-basis when it is explicitly set, from width when flex-basis is auto, or from the item’s intrinsic content size when neither is specified. Understanding this initial sizing is essential because it determines how much total space the items claim and whether the container has room left over or needs items to shrink.

Once the base sizes are known, the browser uses flex factors to distribute free space. In an underflow situation, flex-grow spreads unused space among items according to their grow values, and the chapter shows how different combinations of grow factors produce proportional results. In an overflow situation, flex-shrink reduces items using a weighted calculation that considers both the shrink factor and the item’s own base size, which is why larger items often shrink more in absolute terms. The chapter also explains the shorthand flex property and notes that it sets all three flex-related values together, sometimes with implicit defaults.

The final part of the chapter adds min and max constraints to the process, showing how min-width and max-width act as hard limits after the browser’s flex math runs. If a proposed size violates a constraint, the browser adjusts the other items again so the container still fits while respecting those boundaries. The chapter closes by reinforcing practical uses of these rules, such as keeping navigation buttons usable, emphasizing a pricing card, or preventing items from becoming too small or too large. Overall, it equips readers to predict and control Flexbox behavior with more confidence.