Introduction to CSS layout
Although this lesson is titled Flexbox, we begin with an overview of CSS layout which will help you to understand how Flexbox compares to other, more traditional, layout tools such as floats (float: left, float:right) and positioning (relative, absolute, fixed). This page also provides a soft introduction to a CSS grid, a relatively new system for two dimensional layout.
I encourage you to not only read through this section, but to explore the examples they offer with Codepen when available. You can skip the section on Table Layout and the Multi-column layout section that comes afterward.
Normal Flow
Give this page a quick but careful read. You may see a question or two on a quiz.
Flexbox
At last! Read the entire page and complete the simple example under the heading Introducing a simple example. We will complete the other exercises in class.
Other Flexbook Resources (in case you really love it)
Floats
Read the exciting first paragraph "The Background of Floats," and work through the "Simple Float Example" until you are sure that you understand it. The rest of the page is optional and will NOT show up on a quiz.
Positioning
Positioning is important. Don't leave this section until you thoroughly comprehend relative, absolute, and fixed positioning, as well as the mysterious z-index property and, finally, STICKY positioning. I recommend working your way through the exercises. I did.