Angular Flex Layout
Before you can make effective use of Material, you must be aware of its layout engine. If you have been doing web development for a while, you may have encountered Bootstrap's 12-column layout system. I find it enormously irritating, since it falls foul of a mathematical barrier in my brain, which is wired to divvy things up as parts of 100%. Bootstrap also demands strict adherence to a div
column and row hierarchy that must be precisely managed from your top-level HTML to the bottom. This can make for a very frustrating development experience.
In the following screenshot, you can see how Bootstrap's 12-column scheme looks:
Figure 5.6: Bootstrap's 12-column layout scheme
Bootstrap's custom grid-layout system was revolutionary for its time, but then CSS3 Flexbox arrived on the scene. In combination with media queries, these two technologies allow for the creation of responsive UIs. However, it is very laborious to leverage...