Learning flexbox

While working on the distribution page for The Citypak Project, I began to learn about a very powerful layout tool called flexbox. Flexbox can be extremely useful because it allows us to easily solve problems we face when trying to align items within a container.

How it works

Start by adding the following code to your parent, or flex container. It is important that you use webkit prefixes for safari, or the entire flexbox element will be broken.

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

That’s it! We are now ready to apply properties to child elements. These are called flex items.

.flex-item {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

This particular example would allows us to vertically align items within a container.

There are a wide variety of properties that can be applied to flex items. A Visual Guide to CSS3 Flexbox Properties talks about most of them and has a lot of visuals to demonstrate exactly how they work.

Limitations

Remember though, flexbox is not without it’s downsides. One thing to think about when deciding whether or not to use flexbox is browser support. Unfortunately, flexbox is not supported by all browsers.

For a complete list of browser compatibility for almost anything, Can I use is a great resource.

Sure, flexbox can make life easier, but you need to be careful not to isolate your users. If a large majority of your users are accessing your content on IE9, then it is probably not wise to use flexbox.

Given The Citypak Project’s traffic, I decided that flexbox was an appropriate solution for the distribution list.

In addition to the distribution list on The Citypak Project’s page, I have used flexbox on my personal website. Although flexbox is not perfect it is a really great way to overcome obstacles in our designs.

Thanks for reading!

• ‹ Previous
• Next ›