
Almost complete guide to flexbox (without flexbox) - _kush
http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
======
callahad
Per /u/AssistingJarl's comment on Reddit [0]:

> _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...](https://www.reddit.com/r/webdev/comments/4dwkby/almost_complete_guide_to_flexbox_without_flexbox/)
[1]: [http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

------
saidajigumi
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.

[1] [http://caniuse.com/#search=flexbox](http://caniuse.com/#search=flexbox)

~~~
jmknoll
This idea makes more sense to me than trying to implement flexbox without flex
properties.

Do you have any examples of this idea implemented well?

------
interfacesketch
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:

[http://arnaudleray.github.io/pocketgrid/](http://arnaudleray.github.io/pocketgrid/)

------
ianstormtaylor
This is great.

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!

------
heavenlyhash
It's 2016 and most of the ways to align content involve making divs pretend to
be tables again.

I'll be pouring myself another one.

------
geon
Most of the tricks break down as soon as you try to use them for anything.
They solve a very specific problem each, and are not composable.

Flexbox is at least a bit sane.

------
Navarr
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.

------
tolgahanuzun
Turkish developers see English content on the blog was both strange and
beautiful. :)

