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

What the FlexBox? – A free 20 video course to learn CSS Flexbox

flexbox.io

Post reply on HN
Print view View original

21–30 of 66 posts

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#21

Post by SonicSoul »

kozak wrote: post #17
Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

There's plenty of cases (especially in the enterprise, where requirements can be tightly controlled) when non-Edge versions of IE can be safely dropped. I'm working on such a project right now, we use flexbox very extensively.

interesting. are you also supporting mobile devices? any issues with iOS or Android to consider?

I am considering flexbox but have to worry about supporting above. Luckily we don't have legacy IE to worry about so am hopeful.

according to this [0] ie 10 and 11 are supported but with "partial support"?

[0] http://caniuse.com/#feat=flexbox

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#22

Post by lstamour »

Someone1234 wrote: post #18
kozak wrote: post #17

Earlier quoted context omitted.

There's plenty of cases (especially in the enterprise, where requirements can be tightly controlled) when non-Edge versions of IE can be safely dropped. I'm working on such a project right now, we use flexbox very extensively.

That's nice for you. For public web-sites it is still non-viable. Broken versions of IE make up too large of a % of users.

Actually, if IE 10+ is the target for my site, I would totally use FlexBox. The list of workarounds is far shorter than CSS headaches used to be. Remember the terrible IE on Mac days? ;-)

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#23

Post by lstamour »

SonicSoul wrote: post #21
kozak wrote: post #17

Earlier quoted context omitted.

There's plenty of cases (especially in the enterprise, where requirements can be tightly controlled) when non-Edge versions of IE can be safely dropped. I'm working on such a project right now, we use flexbox very extensively.

interesting. are you also supporting mobile devices? any issues with iOS or Android to consider? I am considering flexbox but have to worry about supporting above. Luckily we don't have legacy IE to worry about so am hopeful. according to this [0] ie 10 and 11 are supported but with "partial support"? [0] http://caniuse.com/#feat=flexbox

There's a list of bugs, test cases and workarounds here: https://github.com/philipwalton/flexbugs

One bug used to affect non-IE browsers but should now be fixed in all but Safari.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#24

Post by wesbos »

Numberwang wrote: post #20
wesbos wrote: post #3

Earlier quoted context omitted.

Author here - it's just 20 videos broken apart into each topic so when you need to come back to reference something, it's quick. Is flexbox hard to learn? Yes, but it's because it's such a powerful layout tool. There are tons of gripes about Flexbox, but I've found that if you just put in a few hours to learn it, you are going to be way ahead in your CSS and layout game. We haven't had to learn anything hard in CSS f…

If I learn this, is this all i need to use for CSS layout from now on? Or is there more to learn?

You'll still need floats to text and images, but this takes care of quite a bit any float based layouts

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#25

Post by kylecesmat »

Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

Its not horribly broken, IE11/10 is well supported with prefixes & past flexbox-spec properties. Autoprefixer does all the work there. For IE9/8 you could rely on polyfills like https://github.com/10up/flexibility

Listened to @_lemonmade & @snookca at a recent conference talk about how they're using Flexbox across the Shopify platform and there is no reason why other far-reaching platforms shouldn't make the switch today.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#26

Post by jordanlev »

Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

One of the web's greatest features is progressive enhancement. So you can (and in my opinion should) use flexbox now as it has pretty decent browser support -- just make sure there is a decent fallback to something that is not-as-visually-perfect-but-still-decent (such as ye old float-based layout or display:table).

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#27

Post by paulojreis »

krat0sprakhar wrote: post #8

IMO, Flexbox is one of those skills that would solve more than half of my frontend problems if I were good at it.

Not quite, I think.

I've been using it, it's cool and all, solves some common CSS issues, but it comes with its own set of problems. For starters, it's a whole new set of browser incompatibilities that you have to learn [1], some of them render flexbox almost useless [2]. Additionally, IMHO, it's model is leaky; leaky in the sense that the it relies on DOM structure - a `display: flex` element will do it's thing by affecting the direct child elements. This means that a) if your component is wrapped by another component, you'll have a hard time predicting how it will be laid out/isolating the behavior; and b) if, by some reason (e.g. using Angular directives) a wrapper is added between the `display: flex` and the flex item elements, the layout will be lost.

[1] https://github.com/philipwalton/flexbugs

[2] https://code.google.com/p/chromium/issues/detail?id=346275

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#28

Post by Someone1234 »

kylecesmat wrote: post #25
Someone1234 wrote: post #14

Even if you know Flexbox you cannot use Flexbox because support lacks. http://caniuse.com/#feat=flexbox The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go. Come back in five years when IE 11 is a distant memory and Edge is popular.

Its not horribly broken, IE11/10 is well supported with prefixes & past flexbox-spec properties. Autoprefixer does all the work there. For IE9/8 you could rely on polyfills like https://github.com/10up/flexibility Listened to @_lemonmade & @snookca at a recent conference talk about how they're using Flexbox across the Shopify platform and there is no reason why other far-reaching platforms shouldn't make the switch t…

So your point is that it isn't broken but that you need to use a polyfill to fix it..? That's a very consistent message.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#29

Post by toxican »

vanderZwan wrote: post #2

As someone who has little direct experience with this part of webdev (other than aligning paragraphs once in a while for really basic static text sites), I have to wonder: is the fact that flexbox requires a 20-part video course a sign of it being: - a broken mess, - a less broken mess than what came before it, - an inevitable consequence of trying to solve an inherently difficult and complicated problem? - some comb…

It me took about 15 minutes of reading an article to get a basic understanding and start using some basic functionality. I'd imagine the 20 videos explore every crevice of Flexbox, which you don't necessarily need to start using it.

Re: What the FlexBox? – A free 20 video course to learn CSS Flexbox

#30

Post by jasonkostempski »

vanderZwan wrote: post #2

As someone who has little direct experience with this part of webdev (other than aligning paragraphs once in a while for really basic static text sites), I have to wonder: is the fact that flexbox requires a 20-part video course a sign of it being: - a broken mess, - a less broken mess than what came before it, - an inevitable consequence of trying to solve an inherently difficult and complicated problem? - some comb…

Dynamic layout is a hard problem. I've never come across a layout engine that didn't require at least a day to get comfortable with. Some may have the advantage of being similar to something you've used before and might give you a head start but that can also slow you down when you assumed it's exactly like the other when it's not.
Post reply on HN