Lesson 5: Elastic layout with the Flexible Box Module

This lesson introduces the Flexible Box Layout module. This layout module allows you to group items (called flexbox items) into horizontal and vertical layout groups. These can also be nested inside each other for sophisticated layout control.

Using Flexible Box layout preserves document semantics and provides powerful primitives that are easy to use.

We'll start by opening the file 'index.html' in the exercise5 folder. Looking at the content of that file there is a page specified where you see a

with an id of 'main' containing a simple article with an aside and navigation section plus a header and footer section.

It's important to note that the main article content is presented first to help readability when the user is vision impaired, yet retain logical flow in the absence of the flexbox feature.


[NOTE: If you are running Chrome with a version less than 21, replace all occurrences of '-webkit-flex' with '-webkit-flexbox' and all occurrences of '-webkit-order' with '-webkit-flex-order']

Open the file 'flex.css' in your text editor.

Step 1: Build single line flexbox, show stretch/contract.

Step 2: Emphasize the flexbox items

Step 3: Build a vertical layout flex box that nests the horizontal one from step 1.

Step 4: Try out changing order of the header and footer flex items.

Step 5: Change the order of the content of the main article.

Step 6: Tidy up the header and footer with background and sizing

Continue to Exercise of Lesson 6