Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flexbox Adventures

chriswrightdesign.com

Post reply on HN
Print view View original

11–20 of 40 posts

Re: Flexbox Adventures

#11

Post by reneherse »

kagamine wrote: post #9
qntmfred wrote: post #8

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…

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

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

Re: Flexbox Adventures

#12

Post by janfoeh »

melling wrote: post #10
paxtonab wrote: post #7

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

Yes, but are you willing to forgo IE8, IE9, and IE10 support? http://www.netmarketshare.com/browser-market-share.aspx?qpri... Let's hope Windows 10 is a huge hit.

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/

Re: Flexbox Adventures

#13

Post by 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%.

Re: Flexbox Adventures

#14

Post by 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?

Re: Flexbox Adventures

#15

Post by _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.

Re: Flexbox Adventures

#16

Post by leephillips »

_greim_ wrote: post #15

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.

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

Re: Flexbox Adventures

#17

Post by matrix »

kagamine wrote: post #9
qntmfred wrote: post #8

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…

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

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.

Re: Flexbox Adventures

#18

Post by RobertKerans »

reneherse wrote: post #11
kagamine wrote: post #9

Earlier quoted context omitted.

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

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

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.

Re: Flexbox Adventures

#19

Post by jonrimmer »

leephillips wrote: post #16
_greim_ wrote: post #15

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.

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

Re: Flexbox Adventures

#20

Post by joshuahutt »

speg wrote: post #13

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

What kind of phone do you have?
Post reply on HN