Understanding CSS3 Flexbox for Responsive Design

Most developers are familiar with CSS floats and clearfix hacks to get proper multi-column layouts. These are still in use today because they work and have great support among a variety of browsers. However, in 2009 a new display style named flex appeared on the map.

Since then flex has undergone a few changes to reach its current iteration. The flex value is an alternative to block elements floated and manipulated using media queries.

Instead, developers can build a flexible container, flexbox for short. It’s great for mobile screens and responsive content for dynamic layouts and webapps. This guide will cover the fundamentals of CSS flexbox usage and some helpful resources for digging deeper into the topic.

The flexible box layout is a way of using CSS’s display property in a whole new manner. Block elements stack vertically while inline elements stack horizontally(until they break onto a new line).

Flexbox elements can stack vertically or horizontally based on your setup. They can be evenly spaced across the page or squeezed tight up against each other. The point is offering more control to developers who want to build naturally responsive layouts.

Any element referenced as a flexbox is a container element. This container holds internal elements known as flexbox items. I recommend skimming the first part of this Mozilla Dev Network article for details.

The display: flex container may have a fixed or fluid width, but it makes sense to leave it fluid, so the content adapts with the page. The internal elements are not given specific width values but instead display based on proportions.

The above video does an excellent job of explaining the details. In short, you use a CSS property named flex to define a ratio between boxes (mostly HTML div elements). flex: 1 represents a 1:1 ratio where each internal flex item displays at the same width regardless of screen resolution.

Naturally, the first important part of a flexbox is the container itself. This container is given display:flex so its children behave in an expected manner.

Items inside the flexbox can flow vertically or horizontally by using the flex-direction property. This takes a value of either row or column with reverse options as well. Note this property is applied to the parent, not the children.

Another important property is justify-content which also applies directly to the parent. This defines how space behaves when internal elements don’t fill the container. Flexbox elements can be centered, aligned left/right, or spaced evenly as appropriate. Check out the Codrops reference for more info.

Both of these properties are crucial when customizing a flexible container. But you also need to setup properties for defining how internal elements should behave.

Flexbox uses the flex property which is shorthand for a few different settings. CSS flex can take three options which individually define flex-grow, flex-shrink, and flex-basis.

The first two properties define the growth and shrink ratios for internal items.

Values are unitless so flex: 1; is valid syntax. The value of 1 would define each box at a flexible value of 1 ratio based on all other boxes.

At first this property may seem confusing but with practice and live examples you’ll come to realize how it all works. The shorthand property flex is really how you structure sizes and behaviors of internal content boxes.

The only part of flex that takes a unit is flex-basis. This optional setting defines the internal box’s default size(width if row, height if column). By default it’s set to 0 but you can choose anything with any unit from pixels to rems.

If you want a complete guide of the major flex properties check out this post on CSS-Tricks. It covers all the main properties and how they function in the browser.

When you first read that flex has no units it can seem daunting. But the best way to understand how this works is by analyzing a bit of code.

The flexbox model has gone through a series of changes with revisions and simplifications of code standards. Be aware that some tutorials and live demos may use outdated syntax and require some updates before use on another project.

Take a look at the below CodePen snippet made by Chris Coyier. It’s a bare-bones basic layout with a fixed center container bookended by two fluid containers. The fluid containers only need a single line to define their behavior: flex: 1.

If you want a more diverse example check out this flexible layout on CSSDeck.

The main content box is flexible while other columns are fixed. Resizable elements remain fluid until the sidebar column eventually breaks down.

Everything in that sample layout is built using flexbox. There are no floats, there are no media queries. This square grid snippet illustrates the same point that responsive flexbox layouts do not require media queries.

But perhaps one of the coolest uses for flexbox is vertical & horizontal centering. Web designers have always used margin: 0 auto for horizontal centering with a fixed width. But flexbox allows both vertical and horizontal centering on a fluid-width container. I know, crazy junk.

These examples only touch the surface of what’s possible with flexbox. You may want to jump in and start dropping flexbox layouts into every new project – but it’s a good idea to first learn which browsers fully support this technique.

The modern flexbox specs have been updated many times since the original release in 2009. Current 2015 specs have been adopted by all modern browsers including Internet Explorer.

But the problem of common usage lies in backwards compatibility. IE10(and lower) has little-to-no support for flexbox. IE10 supports the -ms prefix while IE9 and below have no support at all.

Developers also need to consider browser prefixing. While IE10 is a nuisance there are other required prefixes for many of the flexbox properties.

This begs the question: is flexbox ready for common use in web projects?

The answer is annoying but honest: it depends.

HTML5 webapps can definitely benefit from the flexbox model. A simple corporate website may be better off relying on floats and media queries. The consideration lies in browser support, and thus browser stats of typical visitors on any given website.

But as for the spec itself, go nuts! Most developers are using up-to-date browsers which easily support the flexbox model.

Now is a good a time as any to practice flexbox on your own. See what you can build and try out new ideas to learn how flexbox operates and where it could be useful.

If this post has your flexbox senses tingling then why not keep the momentum going? You’ll find lots of in-depth tutorials online that cover specific examples of flexbox use for beginners.

If you want to learn more about this layout mode then take a peek at these links and see if anything catches your attention.

Here are other blogs that you may find interesting: