teaching machines

CS 318: Lab 22 – Flexbox

April 25, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we hit up the new Flexbox system of CSS. In short, Flexbox allows us to control the distribution, alignment, order, and expansion of a bunch children within their parent. It replaces many of the hacks of float and Javascript to achieve certain layouts.

We’re going to dive right into the lab today.

Here’s your TODO list:

See you next time!



Our goal today is to use Flexbox to create two layouts that would be either impossible or absurdly difficult to orchestrate without it.

First create a lab22 directory. Add a partners.html and include your first names and last initials.


In this first exercise, we’ll create a gallery of images all of different sizes but which nicely interlock. Like this:

Follow these steps to produce your gallery:


In this second exercise, we’ll create a prototype of a standard blog layout that has three columns with a header and a footer:

This particular layout is sometimes called the holy grail—because a lot of sites have pursued it, and it has been hard to achieve with standard CSS. But then Flexbox came along.

Your blog will look something like this:

Follow these steps to produce your blog:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab22 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.