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.
Flexbox Adventures
21–30 of 40 posts
Re: Flexbox Adventures
#22Great 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.
[deleted]
Re: Flexbox Adventures
#23Earlier quoted context omitted.
But it doesn't work in IE 9, right? Isn't that a big chunk of audience?
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.…
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%
Re: Flexbox Adventures
#24How 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.
Re: Flexbox Adventures
#25This little tool is neat for making quick flexbox structures: http://maxsteenbergen.com/fibonacci/
I use this one, which has a bug or two but is excellent and feature rich: http://the-echoplex.net/flexyboxes/
Re: Flexbox Adventures
#26Re: Flexbox Adventures
#27This 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/ Browser support: http://caniuse.com/#search=flexbox
Wouldn't you rather use CSS Grid to replace grid frameworks? http://igalia.github.io/css-grid-layout/
Re: Flexbox Adventures
#28If 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/
Re: Flexbox Adventures
#29Can 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?
Re: Flexbox Adventures
#30If 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/
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)?