

Flexbox Adventures - stelian
http://chriswrightdesign.com/experiments/flexbox-adventures/

======
benvds
This makes doing layouts in css so much easier. I can't wait until we can drop
al the grid frameworks and use this instead.

Another good explanation on CSS-Tricks: [http://css-
tricks.com/snippets/css/a-guide-to-flexbox/](http://css-
tricks.com/snippets/css/a-guide-to-flexbox/) Browser support:
[http://caniuse.com/#search=flexbox](http://caniuse.com/#search=flexbox)

~~~
apaprocki
Wouldn't you rather use CSS Grid to replace grid frameworks?
[http://igalia.github.io/css-grid-layout/](http://igalia.github.io/css-grid-
layout/)

------
kristiandupont
This little tool is neat for making quick flexbox structures:
[http://maxsteenbergen.com/fibonacci/](http://maxsteenbergen.com/fibonacci/)

~~~
altano
I use this one, which has a bug or two but is excellent and feature rich:
[http://the-echoplex.net/flexyboxes/](http://the-echoplex.net/flexyboxes/)

------
speg
How does this work responsively? I was initially reading this on my phone, and
the first example says the middle item is not allowed to grow so the left and
right have been given an equal share so they are sized evenly.

Except on my phone I was seeing the left and middle taking up 50% and the
right one being pushed down and taking up 100%.

~~~
altano
flex-shrink dictates how negative free space should be distributed. When there
is no free space, it is irrelevant.

In addition to that, below a certain width, the CSS on the parent UL is being
changed from flex-wrap: nowrap; to flex-wrap: wrap;, so when the container
shrinks to a width smaller than the sum of the flex-basis of all elements, it
will wrap.

Keep in mind I haven't read the flex spec yet, though, so that's based on
observation not spec.

------
andrewingram
Here's my favourite example of a layout that to the best of my knowledge, you
can't solve with flexbox. I've only been able to solve it with JavaScript

A grid representation of a list, let's say a list of image thumbnails along
with small amount of other data. Something like the image grid in iPhoto.

What's so hard? Let me expand the requirements. I want the dimensions of each
item to be identical, let's say a square. I also want each item to be as close
to a specific size as possible, but scaled up or down slightly to allow each
row of items to exactly fit the width of the containing element. With the
exception of the last row, which is allowed to be unfilled.

You can _nearly_ do this with flexbox. The only problem is that the elements
in the last row will be stretched to fill the row if it's short a few items.
It's also fairly awkward ensuring the height of an element matches it's width,
the current solution seems to be a hack involving padding-bottom.

I'm planning on trying out
[http://gridstylesheets.org/](http://gridstylesheets.org/) to see if it's
expressive enough for what I want. Of course, the catch is that I'm still
depending on JavaScript.

~~~
dunham
Can you add at least one row worth of empty items? They'll spill into an extra
row and get stretched, but you won't see them.

~~~
andrewingram
That's a novel approach. The catch is that the number of items per row is
fluid, so you'd have to overestimate on how many extra items you'd need, then
you have the problem of not knowing how much overflow to hide for the parent
container. Unless i'm misunderstanding your idea?

------
altano
If flex hasn't completely changed how you write layout related CSS, and it
isn't because of legacy browser support, you're missing out.

I also recommend this guide which is very visual and helped me a lot:
[http://css-tricks.com/snippets/css/a-guide-to-flexbox/](http://css-
tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
tomphoolery
What's browser compatibility like on this? Do I need to install any polyfills
to get this to work on older browsers (mostly older IEs)?

~~~
billsossoon
[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

Internet Explorer, as usual, screws everything up. No support in IE8 and IE9,
limited support in IE10.

~~~
altano
In practice, IE10 is totally fine. If you have to support IE9 and lower you
shouldn't adopt flex box yet.

------
simpleblend
Great post. Just used Flexbox for the first time on a production site and it's
working great. I did have to use significant fallbacks for IE though, but
that'll soon be a thing of the past.

------
qntmfred
I remember about 4 years ago I discovered flexbox but of course it didn't have
good browser support yet and there were even a few other competing proposed
CSS solutions.

Just last month I started using it on a production application for the first
time. We all talk about the web moving fast, but 4 years is a long damn time
to have to wait. Especially considering I was doing a lot of WPF/Silverlight
at the time as well and this type of layout support was built in from the
start.

~~~
kagamine
You didn't really have to wait that long, I used it on a site a year ago
(Autumn 2013) and managed IE8 support along with FF, Chrome, IE8+ with a
combination of the 'old' flexbox and the new (+ a couple of IE hacks).

~~~
reneherse
Could you please describe, or point to a resource for, the necessary IE hacks?
I'd be most appreciative. Thanks!

~~~
RobertKerans
One technique is, alongside flex, to use Sass/LESS/Stylus mixins (or just CSS
classes), using float and widths: IE8/9 use those, they're ignored if flexbox
is supported. It takes a little work, and you have to limit yourself somewhat,
but it's reasonably robust. Effectively, you describe a float-based grid, but
include all necessary flex-based declarations. Alternatively, you describe a
display:table based grid, but that has fairly serious downsides.

All current hacks available are pretty fragile. Best solution is a separate
set of rules scoped to .no-flexbox (or .flexbox if you're going the other
way). It's a massive pain in the arse, tbh.

------
mcguire
Can we get a new rule? "In the first few paragraphs of "introduction to X" or
"all about Y", mention what X or Y is?

Please?

------
_greim_
Looking forward to using this once IE8 drops off the radar (never mind IE10).
I considered using it with fallbacks, but deemed it to be not worthwhile since
A) I had to limit flexbox to whatever the alternate scheme (display:table-cell
in this case) could do, B) I was basically maintaining and debugging two
separate layouts at that point.

~~~
leephillips
But it doesn't work in IE 9, right? Isn't that a big chunk of audience?

~~~
jonrimmer
Depends on where you source your browser usage statistics, but IE9's share is
smaller than IE8's. For example, caniuse.com[1] has IE8 on 3.18%, and IE9 on
2.13%. Later versions of IE (and Windows) are better at auto-updating, and
people using them seem to be more willing to upgrade.

I'm lucky enough to work for a company with a last-2-versions support policy
for IE, meaning IE10 and 11 are all I have to worry about. I can't understate
how much nicer it makes web development. So much of the bad reputation of web
technologies stems from wrestling bugs in old versions of IE and the lack of
proper layout capabilities in CSS.

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

~~~
apaprocki
In case you want a more "mainstream" sample, I see this on bloomberg.com: IE9
6.20%, IE8 4.09%, IE11 3.80%, IE10 3.12%, IE7 0.42%

~~~
jonrimmer
To be clear, the caniuse.com stats are sourced from StatCounter Global
Stats[1], not from the site itself, so they should be fairly reliable, albeit
averaged across the world. Obviously, nothing beats measuring for your own
site and audience.

[1] [http://gs.statcounter.com/](http://gs.statcounter.com/)

------
niklasni1
I'm using a multitude of nested flexboxen in a web app currently in testing
and it's working well. There may be theoretical performance issues and
slightly odd behaviour at points but nothing I've noticed -- main thing is all
the layout-juggling JS I didn't have to write...

------
jarnix
Wow it's really impressive.

------
SimeVidas
_“…while helpful tools like grunt-autoprefixer will feel like magic, my
personal experience with them has shown them not to be so perfect.”_

Can the author elaborate?

------
ptb
Flexbox syntax reference: [http://ptb2.me/flexbox/](http://ptb2.me/flexbox/)

------
paxtonab
According to caniuse.com it is fully supported on all major browsers now too.

~~~
melling
Yes, but are you willing to forgo IE8, IE9, and IE10 support?

[http://www.netmarketshare.com/browser-market-
share.aspx?qpri...](http://www.netmarketshare.com/browser-market-
share.aspx?qprid=2&qpcustomd=0)

Let's hope Windows 10 is a huge hit.

~~~
janfoeh
If you're willing to include vendor prefixes and all three syntaxes, you can
get considerably better support, including IE10: [http://css-tricks.com/using-
flexbox/](http://css-tricks.com/using-flexbox/)

~~~
grumblestumble
IE10 uses a substantially different interim spec syntax that is conceptually
different in a couple of key ways.

~~~
jonrimmer
If you run your CSS files through Autoprefixer[1], it's possible to use the
latest syntax, and have it automatically converted to all necessary older
ones.

[1]
[https://github.com/postcss/autoprefixer](https://github.com/postcss/autoprefixer)

