From floats to flexbox

In this section, we'll get to work and change our columns module from a float-based layout to a flexbox-based layout (I'm excited!).

First, we'll remove all the float-related properties from the columns and break them down to square one; then, we'll use display: flex to transform the float layout into our flexbox-based layout to see immediate results. Finally, we'll explore how flex-direction will be useful in a responsive design; we'll discuss this when we get down to smaller screen sizes.

Removing float-related properties from the columns section

OK, here's our three-column layout:

Let's recall how it moves to a one-column tube at smaller widths:

Alright, let's go to the CSS file. Now we'll remove all the float-based properties from our columns.

Starting with this:

****************
3 columns
****************/
.column {
  float: left;
  width: 31.25%; /* 300/960 */
  margin-left: 3.125%; /* 30/960 */
}
.column:first-child {
  margin-left: 0;
}
.columns figure {
  margin...