Flexbox

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 exampleWe will complete the other exercises in class.

Other Flexbook Resources (in case you really love it)

  1. A complete guide to flexbox
  2. Free video course that requires a sign-up

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.