Product Design Lessons
Intro to Foundation | Lesson #142
Solving problems using Flexbox - Vertical Alignment
How to use the Foundation 6 to vertically align content using Flexbox
CSS is awesome. Well, most of of the time. For some reason, vertically aligning content (especially when a parent element doesn’t have a height) is a pain requiring all kinds of hacks and display: table; nonsense. It takes something that is seemingly simple and makes it confusing and painful. Luckily, Flexbox solves many of the common layout issues we face in CSS and float grids. In this lesson, you’ll learn how to use Flexbox to solve vertical centering in your projects.
You may ask, why not use vertical-align:middle? Well that doesn’t work the way you’d expect either. Sometimes CSS is a bit wonky.
Fortunately, we have Flexbox at our disposal. Flexbox and the Foundation flex grid solve many layout issues and vertical alignment is one of those.
Flexbox is a newer layout/display paradigm, with 2 key components: Flex parents (specified by 'display: flex') and flex children (configured with flex css property).
A quick overview of the benefits of Flexbox include:- Columns automatically resize to container width
- Align left, middle, right, or justified
- Display items in any order and reverse on the fly
- Align vertically!
The first, and really slick thing about the Flexbox is that the children of an element with the display: flex all share the same height. Foundation has an Equalizer component to do this, which you don’t need with Flexbox. This is really nice for card type layouts. So if you have a setup like this:
All your columns inside this row will take up equal width (unless we attach a sizing class like .small-4) and will be the height of the tallest column.
So, let’s do what we came here to do. Vertically align!
Vertically align all the columns inside the row
Add the .align-middle class to the .row to automagically vertically align the columns in the row.
No more fussing with fixed heights, position absolute, or transforms. Check out the results:
Ok, pretty awesome. But sometimes we need to vertically align just one column in a row.
Vertically aligning individual columns in a row
You can align individual columns in a row instead. The align-self-# classes will give column a height of auto and align it. You got some options here:- .align-self-bottom
- .align-self-middle
- .align-self-top
- .align-self-stretch
This gets you:
Next Steps
Rad! You can use this to create more interesting, complex UI and layouts without resorting to hacks. Flexbox is one of the first CSS modules designed for actual layout and therefore it makes a lot of tasks much easier, or even possible at all. There’s a lot more you can do with the flex property in CSS. You can use it now - browser support is great!
For a deeper dive into Flexbox and how you can use Foundation’s flex grid, check out our Advanced Foundation online course taken place on November 15th. You’ll learn Flexbox tips and tricks directly from the Foundation development team.
About the instructor
Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.
