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%.
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.
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/ to see if it's expressive enough for what I want. Of course, the catch is that I'm still depending on JavaScript.
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?
Is this possible with CSS grid layout? Flexbox and grid were supposed to be complementary but Flexbox seems to have a major head start on actual implementations.
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.
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.
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).
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.
Thank you; people like you help change the status quo.
Anyone aware of any large sites using Flexbox that has non-tech users, e.g. Netflix or a major ecommerce site? I ask because I'd like to see any presentations or write-ups those guys may have written about their experience.
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.
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.
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.
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...
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/
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.
Another good explanation on CSS-Tricks: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ Browser support: http://caniuse.com/#search=flexbox