6 ms·

Flexbox Patterns: Build user interfaces with CSS flexbox

107 points by micaeloliveira 11y ago

mdorazio 11y ago
Flexbox is great, but honestly I'm not going to spend any time trying to master it until IE supports it well. I know there are workarounds with conditional styling rules and other fallbacks, but that just means I would need to write more code instead of less. Hopefully IE11 will patch some of the bugs and then when IE 8+9 finally drop to a small enough percentage of share in another year or so, it will be time to jump on the flexbox bandwagon.
- juliangoldsmith 11y ago
  You could always use a polyfill: https://github.com/10up/flexibility https://github.com/10up/flexibility
  - mdorazio 11y ago
    Interesting. I'll have to take a deeper look at this. Thanks.
  - ncallaway 11y ago
    I just discovered this yesterday. I'm excited to dig in and make sure it works well, but if it does it's very likely that we'll start using flexbox in our production stuff sooner rather than later.
- marklawrutgers 11y ago
  I've just been using the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> More Info: https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e https://stackoverflow.com/questions/6771258/whats-the-differ... Works fine for me in new projects as long as there's no need for those conditionals and specific legacy code.
- lojack 11y ago
  I use it for stuff that would be impossible to do without javascript. For me, I'm willing to accept graceful degradation and the technical debt involved in making it graceful outweighs the technical debt (and bugginess) in using javascript for layout. Of course, there's other approaches, such as removing design elements that would require this in the first place. We all have our own tolerances for this type of stuff, and I'm probably more of an early adopter than most, but I find that lately flexbox has been starting to help my code more than hurt it.
- mkane848 11y ago
  Is Microsoft still putting that much effort into IE? I thought they were transitioning to Edge. Regardless, I'm in the same boat as you. I have to target IE11, and my friend got me really hyped about flexbox until the cross-browser support came to light.
- OniBait 11y ago
  Every time I run into this or look up something on caniuse[1], I get a (most likely irrational) annoyance that we're comparing things like IE9 which came out in 2011 (predating the official flexbox spec) against modern versions of Chrome and Firefox. I think the way caniuse's interface is set up, IE9 currently lines up next to Firefox 44 and Chrome 49. My though process goes something like: Is it because Internet Explorer is sucky? Partially. Is it because people/companies aren't updating? Absolutely. Is it because Microsoft made it hard to update? Partially. I can't help but think that if a lot of people/companies didn't update their iPhones or Linux desktops for 5+ years, we'd be seeing the same issue and blaming Apple for being so shitty. BTW, looks like all the flexbox bugs in IE11 have been fixed in Edge[2]. I doubt that IE11 will get patched. [1] http://caniuse.com http://caniuse.com [2] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
- jordanlev 11y ago
  I understand what you're saying about making more work for yourself (when a big selling point of flexbox is that it will simplify your layout code). But, there are some situations where flexbox lets you achieve things you can't otherwise do. (Some vertical centering situations; making equal height sibling divs; etc) I tend to wait a long time before I take up new browser features, but as of 2016 I've decided that flexbox has enough support. As long as I have some kind of fallback for IE8-10 (usually "display: inline-block" or some basic floating/clearing does the trick).
indubitably 11y ago
This is a great tutorial, but why obfuscate the CSS as SCSS? In most cases here there’s essentially nothing gained.
- bobwaycott 11y ago
  How exactly is SCSS an obfuscation of CSS?
  - indubitably 11y ago
    Since you _italicized_ I guess I better answer! The tutorial is ostensibly about flexbox, not about CSS precompilation. So, if the you happen not to know SCSS, then it’s obfuscated. Er, then it’s _obfuscated_.
    - bobwaycott 11y ago
      Except it's not, because even though SCSS may alter the presentation of some of the rules, it does not render them unintelligible to the reader. My italics were to call out you specifically saying SCSS was obfuscating the CSS, when it isn't. None of the styles rules shown are made incomprehensible to the reader.
  - davegauer 11y ago
    'Obfuscation' might be taking it a bit far, but demonstrating a CSS feature in anything other than vanilla CSS is, in my opinion, a really poor choice. It's like having an explanation of a JavaScript feature...in TypeScript.
    - bobwaycott 11y ago
      I'll happily agree. I was only pointing out that obfuscation of CSS was not happening.
  - simonw 11y ago
    & + & { margin-left: 5px; }
based2 11y ago
Flexbox Froggy: A game for learning CSS flexbox https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909

107 points by micaeloliveira 11y ago

Flexbox is great, but honestly I'm not going to spend any time trying to master it until IE supports it well. I know there are workarounds with conditional styling rules and other fallbacks, but that just means I would need to write more code instead of less. Hopefully IE11 will patch some of the bugs and then when IE 8+9 finally drop to a small enough percentage of share in another year or so, it will be time to jump on the flexbox bandwagon.

juliangoldsmith 11y ago
You could always use a polyfill: https://github.com/10up/flexibility https://github.com/10up/flexibility
- mdorazio 11y ago
  Interesting. I'll have to take a deeper look at this. Thanks.
- ncallaway 11y ago
  I just discovered this yesterday. I'm excited to dig in and make sure it works well, but if it does it's very likely that we'll start using flexbox in our production stuff sooner rather than later.
marklawrutgers 11y ago
I've just been using the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> More Info: https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e https://stackoverflow.com/questions/6771258/whats-the-differ... Works fine for me in new projects as long as there's no need for those conditionals and specific legacy code.
lojack 11y ago
I use it for stuff that would be impossible to do without javascript. For me, I'm willing to accept graceful degradation and the technical debt involved in making it graceful outweighs the technical debt (and bugginess) in using javascript for layout. Of course, there's other approaches, such as removing design elements that would require this in the first place. We all have our own tolerances for this type of stuff, and I'm probably more of an early adopter than most, but I find that lately flexbox has been starting to help my code more than hurt it.
mkane848 11y ago
Is Microsoft still putting that much effort into IE? I thought they were transitioning to Edge. Regardless, I'm in the same boat as you. I have to target IE11, and my friend got me really hyped about flexbox until the cross-browser support came to light.
OniBait 11y ago
Every time I run into this or look up something on caniuse[1], I get a (most likely irrational) annoyance that we're comparing things like IE9 which came out in 2011 (predating the official flexbox spec) against modern versions of Chrome and Firefox. I think the way caniuse's interface is set up, IE9 currently lines up next to Firefox 44 and Chrome 49. My though process goes something like: Is it because Internet Explorer is sucky? Partially. Is it because people/companies aren't updating? Absolutely. Is it because Microsoft made it hard to update? Partially. I can't help but think that if a lot of people/companies didn't update their iPhones or Linux desktops for 5+ years, we'd be seeing the same issue and blaming Apple for being so shitty. BTW, looks like all the flexbox bugs in IE11 have been fixed in Edge[2]. I doubt that IE11 will get patched. [1] http://caniuse.com http://caniuse.com [2] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
jordanlev 11y ago
I understand what you're saying about making more work for yourself (when a big selling point of flexbox is that it will simplify your layout code). But, there are some situations where flexbox lets you achieve things you can't otherwise do. (Some vertical centering situations; making equal height sibling divs; etc) I tend to wait a long time before I take up new browser features, but as of 2016 I've decided that flexbox has enough support. As long as I have some kind of fallback for IE8-10 (usually "display: inline-block" or some basic floating/clearing does the trick).

indubitably 11y ago

This is a great tutorial, but why obfuscate the CSS as SCSS? In most cases here there’s essentially nothing gained.

bobwaycott 11y ago
How exactly is SCSS an obfuscation of CSS?
- indubitably 11y ago
  Since you _italicized_ I guess I better answer! The tutorial is ostensibly about flexbox, not about CSS precompilation. So, if the you happen not to know SCSS, then it’s obfuscated. Er, then it’s _obfuscated_.
  - bobwaycott 11y ago
    Except it's not, because even though SCSS may alter the presentation of some of the rules, it does not render them unintelligible to the reader. My italics were to call out you specifically saying SCSS was obfuscating the CSS, when it isn't. None of the styles rules shown are made incomprehensible to the reader.
- davegauer 11y ago
  'Obfuscation' might be taking it a bit far, but demonstrating a CSS feature in anything other than vanilla CSS is, in my opinion, a really poor choice. It's like having an explanation of a JavaScript feature...in TypeScript.
  - bobwaycott 11y ago
    I'll happily agree. I was only pointing out that obfuscation of CSS was not happening.
- simonw 11y ago
  & + & { margin-left: 5px; }

based2 11y ago

Flexbox Froggy: A game for learning CSS flexbox https://news.ycombinator.com/item?id=10652909 https://news.ycombinator.com/item?id=10652909