Flexbox, floats, and inline-block for layouts

Are you confused whether to use float, inline-block, or flexbox?

Both float and inline-block work fine in different scenarios when you just want to place HTML elements side-by-side, but each has its limitations.

As long as you use a clearfix hack on the parent container, floats work just fine, but you can’t center floats. (at least not without hackery)

Inline-block elements, however, can be centered fairly easily with text-align: center but you can’t easily align two elements to opposite sides of a parent container like you can with a simple float:left and float:right.

Flexbox solves the shortcomings listed above and many more, but browser support is limited. So what can you do?

You can use flexbox and inline-block (or flexbox and floats)!

Flexbox will ignore float and inline-block properties, which means it can be treated as an enhancement to your layouts. Therefore, older browsers will simply use the float and inline-block-style layouts, while modern browsers will use the flexbox goodness.

Here is one example of layering flexbox on top of inline-block, and the enhancements flexbox brings along with it.

Using flexbox as an enhancement to an inline-block layout

Here is an line-block layout:

See the Pen Inline-block + Flexbox by Joey Augustin (@joeaugie) on CodePen.

Note: both this and the final example look better in a separate window on a wider screen. :)

I am using Pure CSS and its corresponding grid system (.pure-g for containers and .pure-u for grid elements) which utilizes inline-block for layouts. Pure CSS also has display: flex by default on the .pure-g class, but I removed it so I could add it separately to show how it all works.

Scenario: What if you wanted to have each grid item equal height and position the button to always be at the bottom of the container, no matter the whitespace above it?

To accomplish this with the inline block layout, you may have to write some javascript to equal out the heights and do some funky absolute positioning in order to keep the buy button at the bottom of the container. Not fun and very time consuming.

With flexbox, you can accomplish these tasks with less fuss (once you get the hang of it, of course, which will take time and perhaps a different mental approach).

Here are some steps you could take:

First, declare display:flex on the outer container and use justify-content:space-around to space them out evenly and center them all at the same time. (win!)

Then, added display:flex on each grid item to turn them into flex parents as well. (A flex item can also be a parent)

Next, use flex-direction:column to change each grid item’s axis to vertical. (By default, it's horizontal)

Then, since the axis is vertical, use justify-content: space-between to pin the top content (the image, title and paragraph all inside a div) to the top of the grid container, and the buy button to the bottom.

Finally, use align-items: center so the buy button doesn’t get stretched out, because by default, align-items is set to stretch.

Here is the result:

See the Pen Inline-block + Flexbox by Joey Augustin (@joeaugie) on CodePen.

Here is a video of me explaining this process in more detail:

I hope this helps you on your CSS layout mastery journey. If you have any questions or comments, I’d love to talk on Twitter - joeaugie.