Introducing Flexbox
Before the flexible box layout model was introduced to CSS, the various approaches used to build layouts were convoluted and prone to errors. For example, we used floats, which were originally intended for text wrapping around images, for table-based layouts. Flexbox solves this by abstracting many of the properties that you would normally have to provide in order to make the layout work.
In essence, the Flexbox model is what it probably sounds like to you: a box model that’s flexible. That’s the beauty of Flexbox: its simplicity. You have a box that acts as a container, and you have child elements within that box. Both the container and the child elements are flexible in how they’re rendered on the screen, as illustrated here:
Figure 18.1: Flexbox elements
Flexbox containers have a direction, either column (up/down) or row (left/right). This actually confused me when I was first learning about Flexbox; my brain refused to...
