Easy List Items with Flexbox


Almost anything that displays information uses one of the most common UI elements: a list, with items in it. In today’s modern web applications, these list items are no longer single-component items - they’re complex combinations of labels, controls and other pieces that allow a user to act on the items in the list.

Take for example, something like this:

Example of a list item

This is a super common pattern - an item in a list, with controls on the right and left for selecting, configuring and removing. Regardless of the specific items, this is a really common piece of user interface that you’ll find in almost any application today.

Until recently, these were - frankly - a pain in the ass to create. Sure, laying out the pieces in the line item horizontally is easy enough - a few floats here and there, some margin and padding, and boom, you’re there. But getting it to center vertically in a perfect line, regardless of content height? FORGET IT. Pain City.

Until now. Until flexbox. This changes everything.

In the past, creating the above list item would require a few different hacks to work. Either you put it in a table (not really a hack if it’s truly tabular data, but that’s a debate for another day), use line-height to fool to browser into vertically centering, set display: table-cell on items, or some other combination of methods to convince the browser to display things as you want.

Flexbox makes everything so much easier. Using flexbox, we can define just a couple properties on the elements, and away we go. Here’s a look at it in action. First, the HTML:


<div class="listItem">
  <input type="checkbox">
  <span>This is an item</span>
  <i class="settings icon"></i>
  <i class="remove icon"></i>
</div>

(I’m using the Semantic UI library for the icons here. This library is a fully featured CSS framework that, to me, is nicer than Bootstrap. Check it out.)

And, now the magic. This is the CSS that makes it all work:

.listItem, i {
  display:flex;
  align-items:center;
}
.listItem span {
  flex: 1;
  margin-left: 20px;
}

That’s it. Perfectly vertically-centered list items, where everything takes up the right amount of space. And the best part? No floats!

Here’s what’s happening. The first thing we do is to set display:flex on the container for the list item. This turns the container into - you guessed it - a flexbox. Once that happens, every item inside that item (in our case, div.listItem) is turned into flex items. These flex items have special properties that allow them to interact with the flex box in super cool ways. To get things to center vertically, we simply apply align-items:center to the flexbox, and we’re done. Couldn’t be easier.

The other thing you’ll notice here is the flex: 1 on .listItem span. This is a shorthard property that tells the span that it should expand to fit inside the flexbox. The other items have a default value of 0 set on them, and with the span having a value of 1, it takes priority and expands to fit. We could add flex: 1 to the checkbox if we wanted, and the checkbox and span would evenly split whatever space is leftover in the flexbox. Want the span to take up twice as much space as the checkbox? Just set flex: 2 on it, and flex: 1 on the checkbox. Frickin’ simple.

Flexbox is honestly the best thing to happen to the CSS spec in awhile. A buddy of mine has replaced just about every single float on one of his really large sites with flexbox, reducing code footprint and increasing maintainability vastly.

Another beautiful advantage to flexbox: it’s fully compatible across all current browsers, INCLUDING mobile versions. Pretty fly, huh?

Hopefully this gave you a great intro to one of the practical ways to use flexbox immediately. I’d recommend diving in to learn all the other cool tricks it can do - trust me, I’ve only scratched the surface with this example. One of the best articles on flexbox is Chris Coyier’s article on it. I’d highly recommend you dive in and start playing around.

Are you using flexbox on your site or app? How’s it working? Got some super cool success stories to share? Leave them in the comments!

Related Posts

How to Onboard a Product Designer

If you're bringing a product designer or UX designer in to help you design your product, there's a bad way to do it, and a good way to do it. Here's how to make sure you're doing it right.

Review: Slicing Pie

Slicing Pie is a new way to think about company equity splits, and it blows away the old methods you've probably used.

When Troubleshooting, Follow the Process!

When you're trying to troubleshoot something - a car that won't start, or a business that isn't working - follow the right process.

The Art of Finding a Way

Being resourceful and relentless is one of the keys to being successful (and a great shipper). When in doubt, find a way.

Why I Have a Cocktail at 3:30 Every Day

Every day at 3:30, I stop what I'm doing and have a cocktail. It's become an incredibly important part of my daily routine.

Everyone In a Startup Should Have This Skill

You know you need technical skills to build the product, and sales skills to sell it, but does your team have this critical skill?

Doing Things Makes You Feel Better

If you're feeling down, depressed or just in a blah mood, do something. Anything. Make a thing, clean a room. Action makes you feel better.

Review: Auth0

Auth0 is a service that provides identity as a service, so you never have to build authentication again. Here, I lay out the good and the bad.

Why I Unfollowed Everyone on Twitter

I unfollowed everyone (~4,500 people) on Twitter. Here's why I'd do such an insane thing.

How to Turn Off Facebook Live Notifications

Facebook Live is cool, but the constant notifications about new videos aren't. Here's how to turn them off and get some peace.