Flexbox

What is Flexbox?

Flexbox is a way to define layouts in CSS, nearing full standardization (currently it is a "Last Call Working Draft"), that is more intuitive and easy to work with than the traditional box model (float and clear and all that jazz).

Flexbox is not a pre-processor or external tool like SASS or Compass, but is part of CSS proper. That said, it's still new and requires vendor prefixing to use it safely now (more on this below). Flexbox is a newer technology, but is well supported on modern browsers including IE10 and up.

Flexbox Codepen Sample

Throughout this video we'll be working in a sample CodePen with flexbox examples. Feel free to pull this up in your browser and play around with it to try out some of the tricks Mike shares in the video.

Flexbox First Example

In this first example, we have an unordered list of items that we want to display as a horizontal list to act as our nav bar.

We'll achieve this with the following box model styling:

ul li {
  float: left;
  width: calc(100%, 6);
  /* ... */
}

This works, but it has the unfortunate limitation that it hard codes the element count in our CSS. Instead, we'll achieve the same effect with:

ul {
  display: flex;
}

This instructs the parent ul to act as a flex container, and the child items automatically fill out the parent container, "flex"ing to fill the space!

Using flexbox removes the need to hard code the nav item count in our styles, but even more than this, it gives us a better language for defining the styles we want. Per Mike:

it just lends itself more to the state of the web today and it's responsive nature.

Well said Mike, well said.

Flex Axes

By setting display: flex on our parent list (the ul), we turn it into a flex "container", defining the "main" and "cross" axes. Similarly, the children of our container are now "flex items" with their own main and cross dimensions.

One of the great features of flexbox is how easily we switch between horizontal and vertical arrangements. The default orientation of the main axis is left to right (flex-direction: row), but we can flip this for a top to bottom layout with:

  ul {
    display: flex;
+   flex-direction: column;
  }

Moving Things Around

Similar to the ease with which we can reorient our axes with flex-direction, we can shift our items around with the justify-content and align-items properties.

justify-content moves or stretch our items along the main axis and can have any of these values:

• flex-start
• flex-end
• center
• space-between
• space-between

align-items moves or stretch our items along the cross axis and can have these values:

• flex-start
• flex-end
• center
• baesline
• stretch

If we use the align-items: center we can even achieve the holy grail, vertically-centered styling with zero JavaScript. Whoa.

Additionally, we can target individual items to specify their alignment, distinct from their siblings, giving us a great deal of control over the layout.

Reordering Content

Another typically difficult layout action that flexbox makes easy is reordering our content without needing to alter the markup. This is great for responsive design where you might want to lead with a specific element on desktop, but push it down on mobile.

With flexbox, this is as simple as setting the order property on a flex item:

/* set all to order of 1, rather than default of zero */
ul li {
  order: 1;
}

/* move the special item first */
li.special-item {
  order: 0
}

/* move the boring item last */
li.boring-item {
  order: 2
}

Nesting Flex Containers

Flexbox containers can be nested as deeply as we want, meaning that we can define a page level layout with a flex container and flex items of the nav bar, a sidebar, main content area, etc, and then each of those items can itself be a flex container. Flexbox defines a parent child relationship, but doesn't go further than that.

Growing and Shrinking

There are three properties that we can use to control the size of our flex items:

• flex-basis defines an initial size, from which a flex item grows or shrink relative it's siblings
• flex-grow the growth factor for the item
• flex-shrink the shrink factor for the item

By default, our flex items are sized evenly, but by combining the basis, grow, and shrink properties we instruct the items as to how to use up the available space within their parent container.

Is Flexbox the Future?

Flexbox has wide support and offers a much better model for defining layouts than the traditional model. We're sold on it, and use it on all our work these days.

Additional Resources

Now that we're fully sold on the excellence that is flexbox, here are a few more resources to keep the learning going.

• What the Flexbox - A 20 video tutorial by Wes Bos to get you up to speed.
• CSSTricks Flexbox cheat sheet - The go to site for all things styling has an excellent reference sheet.
• Solved by Flexbox - Common layout problems succinctly solved with flexbox.
• Autoprefixer - Flexbox is getting some major action on production sites but you still have to prefix it for the best support. This is the best tool out there for that.
• Flexbox Cheatsheet - Another great cheatsheet, this one by Joni Trythall.