> On the other hand the number of people who are [Flexbox] capable [1] is, at 94%, pretty much the same as the number of people who can use the inline-blocks or CSS tables that most of these depend on. Support for 2d transforms is actually worse at 90%, which makes the column-reverse substitute a long trip back to square one.
Or use flexbox anyway and structure your HTML and CSS to afford progressive enhancement. You'll get the full styling in the wide range of browsers that support flexbox[1], falling back to a still-reasonable styling in the older browsers when they ignore the flexbox CSS.
It's easy to forget that CSS' forgiving nature, silently ignoring future/unknown properties, can be a powerful tool for creating backwards compatible sites that gracefully degrade in older browsers.
If you need to support older browsers without Flexbox, another option is to use a tiny (less than 1kb) CSS grid system called Pocket Grid.
The grid system lets you position blocks of content side-by-side similar to Flexbox, and blocks can wrap to another line when there isn't enough space. It's not an equivalent to Flexbox, but for some types of layouts it could be used as a possible fallback.
Pocket Grid has been around since 2013, it's a shame it hasn't gained more attention:
Seeing all of the old alternatives in one place, it makes it so clear why CSS layout is such a hard concept for beginners to learn. Incredibly basic layout needs involve learning at least three or four different box models, and knowing how they'll interact together. So glad we have flexbox now!
This is a bit misleading. The squares, which you would think are backgrounds, are not. They are content inside the items being stretched/squished, but the content does not appear to do.
so you have your container, your item container, and your item.
What made me call this out was the "space-around." There isn't spacing around the .example__item's. They take up the whole space and the content has very specific widths.
> On the other hand the number of people who are [Flexbox] capable [1] is, at 94%, pretty much the same as the number of people who can use the inline-blocks or CSS tables that most of these depend on. Support for 2d transforms is actually worse at 90%, which makes the column-reverse substitute a long trip back to square one.
[0]: https://www.reddit.com/r/webdev/comments/4dwkby/almost_compl... [1]: http://caniuse.com/#feat=flexbox