Making Flexbox Less Scary – Embracing The Future Of CSS

Let’s face it.

CSS sucks.

At least, it has… up until now.

Web developers have had to resort to all sorts of hacks to accomplish layouts that should be easily accessible with CSS right out of the box.

This is where flexbox comes to the rescue to solve all of our CSS layout problems.

Flexbox can feel quite daunting at first, but once you understand it you’ll realize how elegant and intuitive of a solution it really is.

Flex Containers and Flex Items

Creating a flexbox is easy.

You simply add the property display:flex to any element on the page.

This automatically makes every direct child element below our parent flex container a flex item.

It’s important to note that you do not have to specifically declare an item to be a flex item. A flex item is a flex item only by virtue of its direct parent node.

Children of flex items are not flex items themselves unless their parent is also set to display:flex. An element can be both a flex item and a flex container at the same time.

See the Pen Flexbox Items Ex.1 by Ben Weiser (@benweiser) on CodePen.

Watch what happens when we set the class .item to display:flex making it both a flex container and a flex item.

See the Pen Flexbox Items Ex.2 by Ben Weiser (@benweiser) on CodePen.

Notice how the div with the teal background now takes up all the vertical space within the container? This is the normal behavior of flex items. This automatically solves the problem of unequal heights of columns with variable content. We’ve now made .item and all immediate children of .item flex items.

Flexbox Columns

Notice how the flex items here are of different sizes? The flex item with the most content takes up the most space. This is the default behavior. Content is distributed according to the available space across the row.

See the Pen Flexbox Columns by Ben Weiser (@benweiser) on CodePen.

What if we want each column to be exactly the same width no matter what the content is and force the columns to the be same height?
This is simple we will add the property of flex:1 to the item. In order to better understand the flex property I recommend this post over on CSS Tricks. Essentially we’re telling our flex items to take up 1 “share” of the available space. If we were to set one of these items to 2 and the rest to 1 that item with the property of flex:2 would take up twice as much space. The 1 sets the flex-grow property, and the px width is the flex-basis.

The column will never be less than 200px if it has less than this amount of space it will automatically wrap to the next line. The other property that can be set using the flex shorthand is flex-shrink which is much less commonly used. Furthermore, we’re going to set the flex container’s flex-wrap property to wrap to ensure that when all available space is used up our container will automatically break to the next line.

See the Pen Flexbox Equal Columns by Ben Weiser (@benweiser) on CodePen.

Vertical And Horizontal Centering

Vertical and horizontal centering has always been a genuine struggle. Something that should be extremely easy to accomplish in the past couldn’t be done without using an absolute position hack, a table, or a negative margin hack.

Flexbox makes vertical centering extremely easy with clean, hack-free CSS.

See the Pen Flexbox Vertical Centering by Ben Weiser (@benweiser) on CodePen.

The display:flex property is used to set the element as a flex container. Justify-content helps determine where the content is placed along the horizontal axis of all flex items, and align-items relates to the vertical axis.

Media Objects

Perfect centering with flexbox can be especially useful when working with media objects like images, video, embedded pdfs, etc.. Sometimes we want to have images of all different dimensions and display text next to our that is perfectly centered next to the media object both horizontally and vertically. I created this codepen to allow you to insert a random number of pixels to demonstrate how the content will behave as the height of the image changes. Feel free to play around with this to get a better feel for how vertical centering works with flexbox.

See the Pen Align Media Objects by Ben Weiser (@benweiser) on CodePen.

If you haven’t experimented with flexbox yet, it’s time to start pumping some blood to those CSS muscles and showing off how buff your stylesheet skills are. This post barely scratches the surface as to what the possibilities of flexbox are and what it can do to help make writing CSS a heck of a lot easier.

Browser support is already very strong for flexbox, with (of course) IE primarily being the browser with issues related to flexbox. IE8 and IE9 do not support it, but 10 & 11 have partial/buggy support. If you do not care about supporting IE8 or 9 (good for you high five BTW!), then feel free to use flexbox and just be aware of the IE bugs documented and account for them.