5 Flexbox math

 

This chapter covers

  • How browsers determine the base size of each item
  • Running through the flex-grow algorithm
  • Understanding the math of flex-shrink
  • Settings constraints on the growth or shrinkage of flex items

When Flexbox was introduced into a world accustomed to laying out page elements using an HTML table, it seemed like nothing less than magic. Elements could now grow, shrink, and align themselves according to whatever space was available, and it was all done using just a few lines of CSS code. What sorcery was this?!

But, of course, the awesomeness of Flexbox is based on math, not magic. Pop the Flexbox hood and the engine that powers this technology is a robust and often exceedingly complex mathematical system. That system can do amazing things, but its complexity sometimes means that Flexbox can act in weird and seemingly unpredictable ways. In this chapter, you explore the math that underlies Flexbox, which will enable you not only to build more precise and predictable layouts but will also help you solve any Flexbox-related layout problems that arise.

5.1 The flex base size calculation

5.1.1 The base size algorithm

5.1.2 Exercises

5.2 Understanding the flex factors

5.2.1 The flex-grow calculation

5.2.2 The flex-shrink calculation

5.2.3 The flex shorthand

5.2.4 Dealing with flex-grow values between 0 and 1

5.2.5 Exercises

5.3 Taking min/max constraints into account

5.3.1 Using min-width to limit shrinking

5.3.2 Using max-width to limit growing

5.3.3 Exercises

5.4 Solutions to Exercises

5.5 Summary