FlexBox – A Use Case

Video Available (Signup to Access - Members Only)

Let's say you want to create something that looks like this:

Flexbox Header Area

Well, there are a few way to do this. Let's take a look at two of the ever popular ways and then an amazing third way to do it that will blow your mind.

First there is to use a table. This is old school, but works for the most part, but not the best way to do something like this. A table will not allow your content to flow easily for a mobile view, where you might want items to stack on top of each other, as opposed to side-by-side. Stacked items, while creating more scrolling on a mobile phone, for example, will allow for more available space for text and images and make your content easier to view.

Second way is to use floats. You float the logo to the left and navigation area to the right, inside a container and you can have this look. Floats can be cleared and items can be made to stack for mobile users, which already makes it a better way then tables, but you will need to make sure to clear those floats for items below it or you can end up with a mess.

So, what is this new magical way I'm talking about. It's this CSS ability called FlexBox. This allows you to create a flexible area items can fit into basically. So let's jump into some code:

<div class="header">
<div class="logo">Logo</div>
<div class="navigation">
<ul>
     <li>Menu 1</li>
     <li>Menu 2</li>
     <li>Menu 3</li>
</ul>
</div>
</div>

Here we have a “container” with a header class attached and two child items: the logo and a navigation. The output for this is rather plain.

Header Area - Before (Plain)

We have some text to represent our logo and an unordered list to represent a menu. This list has bullets in front of it, which we can remove by applying a list-style: none; to the ul element, which will clean that list up just a little. However, we want to do more than that. We want that logo to slide to left, the navigation and logo to align vertically to each other and our navigation to be side by side on the right side of the page. So here's what the CSS would look like:

.header {
display: flex; // Create Flex Container
align-items: center; // Vertically center if flex-direction is row
flex-direction: row;
width: auto;
}
.navigation {
margin-left: auto;
}
.navigation ul {
display: flex;
list-style: none;
padding: 0;
margin: 30px 0;
}
.navigation li {
margin: 0 0 0 14px;
}

Here's what this CSS is doing for you. There are two flex areas being created, the header (or parent container for both the logo (which currently has no CSS applied to it) and the unordered navigation list ( or parent container for the navigation list items). Both containers allow for child items to be displayed as inline items (think display: inline-block). Then, for the header container, the align-items centers its children, logo and navigation, and the direction of layout of the child items are in a row format (think side by side if you will) within the header container. To push the two apart, we have an auto set left margin for the navigation (could have used a margin-right: auto for the logo, as it would have push the navigation all the way to right side as well). An automatic with was applied to the header container, which will give it a 100% width of it's parent (which is the body area) and the rest of the CSS is for spacing above and below the navigation area, removing its padding and removing the list style. And of course some left margin for each of the list items, to make that look just a little nicer.

Header Area Row

Mobile Responsive

This layout works great. But it can have a little drawback depending on the size of the logo used or the length of the navigation. We could use a Flexbox item to wrap the navigation or implement a mobile navigation (which is probably best to do), but if we wanted to change the layout just a little for mobile responsiveness, we could add in a @media query like this:

/* if screen is less than 37.5em wide */
@media screen and (max-width: 37.5em) {
flex-direction: column;
}
.logo,
.navigation {
width: 100%;
}
}

The max-width in the media query says to use the following to replace the CSS for the header, logo and navigation items if viewed on a screen smaller than what 37.5em would be. You can change that to 600px or whatever you like. What this CSS does is change the flex direction for the header container to column and sets the logo and navigation widths to 100%. This will create a stacking effect, with the logo on top and navigation right below it.

Header Area Column

Conclusion

This is just one of many use cases for Flexbox and barely scratches the surfaces. Another amazing use would be to center text inside a box, that just perhaps has a image as a background. Until next time!