Get to Know the Flexbox Grid in Foundation 6

Win a Fitbit Flex! The Scotchmas Day 9 giveaway can be found at the end of this article.

Why Flexbox?

Flexbox is a brilliant CSS feature that’s been around for a while now that allows CSS grids to be made with ease.

A quick overview of the benefits of flexbox include:

  • Columns automatically resize to container width
  • Align left, middle, right, or justified
  • Align vertically!
  • Display items in any order and reverse on the fly

The best part about flexbox is that you can add columns and all the columns will automatically resize themselves to the parent container. No more declaring widths of 33.3% or some other random number.

For more of a guide on flexbox, take a look at our Visual Guide to CSS3 Flexbox.

The Foundation 6 Flexbox Grid

While it’s very easy to use flex items in your own projects, it is also good to have a standardized grid to work with. Foundation 6 brings with it a new flexbox grid to help make our lives as developers easier.

The Foundation 5 grid looks something like this:


<div class="row">
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
    <div class="small-4 columns">one-third</div>
</div>

These will create a 3-column site.

See the Pen Foundation 5 Basic Grid Showcase by Chris Sevilleja (@sevilayha) on CodePen.

If we wanted to add another column, we’d add another and switch up all the small-4 classes to be small-3.

Wouldn’t it be great if we could just add a column and know that it will automatically get its own space? With Foundation 6 and flexbox, we could create a grid like so:


<div class="row">
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
</div>

Let’s dive deeper into the Foundation 6 flexbox grid and play with some more examples.

Getting Started

By default, Foundation 6 comes bundled with the original grid (non-flexbox version).

The flexbox grid has to be specifically included in your Foundation 6 project when you download your copy of Foundation 6 or @imported when using the Sass version.

00-customize-foundation-6-download-flexbox

Or with the Sass version:


@import 'foundation';

// @include foundation-grid;
@include foundation-flex-grid;

A Basic Grid

Like our example above, we can create a grid with three columns like so:


<div class="row">
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
    <div class="columns">one-third</div>
</div>

We can also use syntax that is exactly the same as the normal Foundation grid to declare the size of a grid column. The cool thing is that if we don’t declare a size for a columns, then it will automatically fill the space that is left.

For instance, let’s declare the first column as half of the row with small-6. The other two columns will fill the space and become one quarter each.


<div class="row text-center">
    <div class="small-6 columns">one half</div>
    <div class="columns">one quarter</div>
    <div class="columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox – Basics by Chris Sevilleja (@sevilayha) on CodePen.

Only Taking the Space Needed

If you only want a column to fit its content and not take any more space, you can use the shrink class.


<div class="row text-center">
    <div class="small-6 columns">one half</div>
    <div class="columns">one quarter</div>
    <div class="shrink columns">one quarter</div>
</div>

See the Pen Foundation 6 Flexbox – Shrink by Chris Sevilleja (@sevilayha) on CodePen.

Stacking

Flexbox has many ways to stack/wrap content when working across multiple device sizes. Like the original grid, you have the ability to stack at certain sizes with classes like small-*, medium-*, and large-*.

If a columns doesn’t have a declared size, then it will not stack. It will just keep resizing with the number of columns in that row.


<p class="text-center">No Stacking</p>
<div class="row text-center">
    <div class="columns">space</div>
    <div class="columns">space</div>
    <div class="columns">space</div>
    <div class="columns">space</div>
</div>

See the Pen Foundation 6 Flexbox – Shrink by Chris Sevilleja (@sevilayha) on CodePen.

If we set the class small-12 medium-3, then this grid will stack on small devices and expand on medium and large devices.


<p class="text-center">Stacks on Small</p>
<div class="row text-center">
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
    <div class="small-12 medium-3 columns">space</div>
</div>

See the Pen Foundation 6 Flexbox – Stack by Chris Sevilleja (@sevilayha) on CodePen.

Another method we can use for stacking is the medium-expand and large-expand classes. The difference is that our columns will just expand to the space available, not just expand to a size we specify.


<p class="text-center">Stacks on Small</p>
<div class="row text-center">
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
    <div class="small-12 medium-expand columns">space</div>
</div>

See the Pen Foundation 6 Flexbox – Stack by Chris Sevilleja (@sevilayha) on CodePen.

Alignment

Thanks to flexbox, we can specify whether we want columns to the right, left, center, justified, or spaced out. Check out the align flexbox items section of our visual flexbox guide for more info.

You can just add one of the following classes to your row class to move your columns.

  • align-right
  • align-center
  • align-justify
  • align-spaced

<p class="text-center">Aligned Center</p>
<div class="row align-center text-center">
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
    <div class="columns small-3">space</div>
</div>

See the Pen Foundation 6 Flexbox – Alignment by Chris Sevilleja (@sevilayha) on CodePen.

Vertical Alignment

One of the coolest parts of flexbox is vertical alignment. There are many hacks in CSS to get vertical alignment, but now it is built in natively thanks to flexbox.

Use one of the following classes on your row or your columns divs.

  • align-top
  • align-middle
  • align-bottom
  • align-stretch

Remember that horizontal alignment uses align-center while vertical alignment uses align-middle


<div class="row align-middle text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

See the Pen Foundation 6 Flexbox – Alignment by Chris Sevilleja (@sevilayha) on CodePen.

You also have the ability to specify these classes on a columns instead of on the row. So you could have a stretched div sitting next to a middle aligned div.

Ordering

The Foundation flexbox grid also comes with a few ways to change up the order of your columns. We can also change up the order depending on the device size.


<div class="row">
  <div class="column order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
  <div class="column order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
</div>    

Conclusion

The new Foundation 6 flexbox grid makes it that much easier to work with flexbox. We have a solid and standardized set of classes that we can drop into our projects to take advantage of this powerful feature.

Scotchmas Day 9 Giveaway

Win a Fitbit Flex!

a Rafflecopter giveaway

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.