Flexbox

A CSS flex box is an essential building block of HTML layouts, as it can create rows or columns and transition between the two.

First, add a div with a class name of "flex" to your HTML:

<div class="flex"></div>

In your CSS, we'll add a class called 'flex':

.flex{ display: flex; }

Using a class to handle a specific property like this is often called a "utility" class. Instead of baking the behavior into a specific layout element, we can tag anything we want to behave with this simple selector.

Now, any child elements you add to this container will behave as columns. For instance, to create a two-column layout:

<div class="flex">
  <div>1</div>
  <div>2</div>
</div>

Simple example creating rows and columns.

See the Pen Flex Box Example by Rich Hauck (@richhauck) on CodePen.

Example using flex-basis to create equally-sized columns.

See the Pen Equal Columns by Rich Hauck (@richhauck) on CodePen.

See the Pen Gallery using CSS Flex by Rich Hauck (@richhauck) on CodePen.

Float

See the Pen Float Example by Rich Hauck (@richhauck) on CodePen.