We’ve been talking about it a lot lately and for good reason. Flexbox rocks and floats and clearfix are hacks that produce unreliable results. The support for Flexbox is great and the learning curve is small. Best of all, Foundation 6.3 came out with a host of great Flexbox helper classes to help you make components or get the layout you want faster with fewer headaches. In this lesson, we’ll show you how to use Foundation Flexbox helper classes to save time and eliminate stress.

Flex Parents Control Your Children

In Flexbox, a parent container with the display: flex; property and value will by default align its children in a horizontal fashion (AKA: row). Also, bestowing a container with display: flex; will give the element power to control the behavior of its children.

You can make any container a flex parent by adding the .flex-container class.

As you can see from the example below, this will create a scenario where .left-thing sits beside .right-thing and both take up only the width of the content inside and it’s padding.

Move Children Horizontally and Vertical

If we add our helper classes to the .flex-container we can move the direct children where we want them. Let’s start with centering them together by adding the .align-center class.

What if we wanted each piece to spaced apart with even spacing on each side and between? We have an .align-spaced class for that.

If we want the blocks spaced apart from each other and pushed to opposite sides of the container, we’ll use the .align-justify class.

Try it yourself:
[Link to Codepen example]

You can also align your children vertically with a single class. These classes can be combined with the horizontal classes to get things lined up right.

Let’s take this widget for example:

We’ll want to vertically align these elements. Even though they are all varying heights, we can easily vertically align them with one class, .align-middle. We’ll also space the items apart with the .align-justify class. It’s magic!

Try it yourself:
[Link to Codepen example]

Tip: Tip: When using vertically aligning content, make sure that you remove bottom margins on things like buttons, <p>’s, header tags, and inputs. This will ensure that your items line up as expected.

Children Grow, Shrink, and Go Auto

By default, a flex child is set to shrink. This means that it only will take up the space of the content inside and any padding. We can tell flex children to grow or shrink or go auto as needed with Foundation’s flexbox helper classes.

Taking the previous example, we can apply the .flex-child-auto to the two middle elements. This will allow them to both be equal width and take up the remaining space. The image on the left and the icon on the right will by default only take up the space they need for their content (flex-basis: shrink;).

Try it yourself:
[Link to Codepen example]

Directing your children

You can also control the direction of your children. A flex parent will orient its children horizontally in a row by default. But if you want them to flow vertically in a column, you can. Let’s take an example where we have to sections side by side.

We want the actions on the right to be aligned vertically in a column and spread apart top and bottom. Here is the markup:

By adding the Flexbox helper class .flex-dir-column we can re-orient the section vertically. Now we can use our alignment classes to spread them apart, align-justify. The flex-direction property flips a horizontal section vertically. This means that our horizontal alignment classes work in this case to vertically align content.

And we get:

Real Life Example

The card on the left is what we have, but we want it to look like the card on the right. From the top, we want the title and star rating on the left and the price on right, aligned to the bottom. You might have used padding-top or position: relative; and bottom: 0; in the past to do this. With Flexbox and Foundation’s helper classes, you don’t need any extra CSS.

First, we’ll make the top section a flex-container.

This will allow the two direct children to sit side-by-side. In this case it is the .card-product-rating and the .card-product-price. Now we can add out flexbox helper classes to space them apart and set the vertical alignment.

Great! Now we’ll get the buttons right. We want the buttons to fill the width of the container and the “Buy” button should be the largest button to create the proper hierarchy. You might have guessed that we’ll make the parent container a flex-container. Now we can use the flexbox helpers to make the “Buy” button grow to fill the remaining space.

We added the .flex-child-grow class to the child element, in this case a button, it will grow to fill the remaining space in the container.

Win!
[Link to Codepen example]

---