-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Mastering CSS
By :

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.
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...