Since Flex-Layout is more of a flowing kind of thing, as opposed to being a grid, it's often easier to think of vertical sections of your application and assign them their own container. This is because the sections within your containers will automatically wrap downward as the viewport size gets smaller. Elements within the container should be thought of as belonging together. Contrasting this with a grid system, such as Bootstrap, the thinking is different; the cells in the grid mark the physical boundaries of the elements. The elements within the cells don't automatically wrap because when you are thinking of the design/layout, you insert elements in specific cells. Another way to conceptualize the differences between a grid and FlexBox is to think of a grid as being two-dimensional (that is, rows and columns—much like a spreadsheet), and FlexBox as being one-dimensional (in that it either flows horizontally, or it flows vertically).

Once you have your vertical containers in mind, you can then think about sub-containers flowing from left to right, and the sub-container then wrapping downward as the viewport size gets smaller—and when it does wrap downward, all the elements with that sub-container go along for the ride. Bear in mind, when I mention sub-containers, that I'm referring to the fact that FlexBox containers can be nested—which is what gives much of the layout control to the developer. When laying out your page, think of the flows as outside-in. This is to say that you should break up your page into large vertical sections—such as a header, main body, and footer—and then dive into each of the sections to add your sub-containers, which will flow from left to right. 

It's difficult to describe flow in words, and so the best thing to do, as always, is to experiment with your containers and elements and study the behavior of their flow as you adjust your viewport size. This chapter includes code listings for three of our component templates (that is, pages) as well as their wireframes. You'll see exactly how I've designed the layouts for these component templates. Along the way, I'll also tell you why I've made some of the decisions I've made.