Are you confused whether to use float, inline-block, or flexbox?
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
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:
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?
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:
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!)
display:flex on each grid item to turn them into flex parents as well. (A flex item can also be a parent)
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.
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:
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.