Introducing Flexbox
Before the flexible box layout model was introduced to CSS, the various approaches used to build layouts felt hacky and were prone to errors. Flexbox fixes 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 exactly what it sounds like: 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 17.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 Flexbox; my brain refused to believe that rows move from left to right. Rows stack on top of one another! The key thing to remember is that it...