3 ms·

Yoga's layout API is very similar, if not a direct copy, of the web's Flexbox. Which funny enough means that we might get a chance to use Flexbox on the desktop

Yoga's layout API is very similar, if not a direct copy, of the web's Flexbox. Which funny enough means that we might get a chance to use Flexbox on the desktop before we can use it on the web. (I'm looking at you IE and your continuing partial support: http://caniuse.com/flexbox http://caniuse.com/flexbox)

alexkavon 10y ago
I wouldn't hold my breath waiting for IE to fully support it.
- nightski 10y ago
  Uh, Edge already fully supports it. I don't think they are adding new features to IE anymore.
  - RubenSandwich 10y ago
    You bring up a good point, in Windows 10 Edge is already the default browser. My comment is more joke then anything substantial. I think realistically anyone who isn't targeting enterprise could use Flexbox and be fine most of the time.
spicyj 10y ago
Yes, it's directly based on CSS Flexbox. See more info about the similarities and differences here – in particular a few default values are different: https://facebook.github.io/yoga/docs/learn-more/ https://facebook.github.io/yoga/docs/learn-more/
- RubenSandwich 10y ago
  Thank you for providing these excellent docs from day 1. Can I suggest that you change the background color of the flex item in the jsfiddle example of the default values, https://jsfiddle.net/emilsjolander/jckmwztt/ https://jsfiddle.net/emilsjolander/jckmwztt/, to something besides white as it took me a moment to realize that I was looking at a flex item as white backgrounds are very common.
- drcode 10y ago
  Is there a plan to add support for the extensions (especially AspectRatio) in React web? I would greatly welcome them.
- reitanqild 10y ago
  The link[0] to GitHub from the hamburger menu on this page results in a 404. [0]: https://facebook.github.io/yoga/http://github.com/facebook/yoga https://facebook.github.io/yoga/http://github.com/facebook/y...
kowdermeister 10y ago
I already use it in production. I don't really care about old IE users. I agree that not all devs can afford this, but many can.
- BinaryIdiot 10y ago
  Parent was referring to the current version of IE which still has partial support. I wish it were better supported today. It would sure make my life easier.
  - TheAceOfHearts 10y ago
    If you use autoprefixer you can reliably use flexbox, with a few minor exceptions which, IMO, aren't huge dealbreakers.
    - BinaryIdiot 10y ago
      Fair enough I've just kinda avoided things not supported fully in evergreen browsers when I can. I should probably re-examine that more often.
  - pault 10y ago
    In my experience it's "good enough". I just shipped a production site with all flexbox layouts and we had to support IE11. I found that the trick was to avoid the shorthand flex attribute and use the explicit flex-* attributes instead.
withjive 10y ago
ReactNative uses Yoga for it's layout. There's an OSX port already in progress, so cross platform Desktop apps using Yoga isn't that far off ;)
venning 10y ago
A lot of real-world usage of flexbox is broken that has nothing to do with IE/Edge. Follow the "Known issues" tab on your caniuse link. Also see Flexbugs [1] for more. I get bitten by #11 and/or #14 on almost every project, which work fine in IE/Edge. [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs
- pault 10y ago
  Wow, thanks for the link. I use flexbox for layouts and usually can get away with fiddling with wrappers and such until it looks right, but I can easily see myself losing at least a half a day to each one of the bugs on that list. :)

alexkavon 10y ago

I wouldn't hold my breath waiting for IE to fully support it.

nightski 10y ago
Uh, Edge already fully supports it. I don't think they are adding new features to IE anymore.
- RubenSandwich 10y ago
  You bring up a good point, in Windows 10 Edge is already the default browser. My comment is more joke then anything substantial. I think realistically anyone who isn't targeting enterprise could use Flexbox and be fine most of the time.

spicyj 10y ago

Yes, it's directly based on CSS Flexbox. See more info about the similarities and differences here – in particular a few default values are different: https://facebook.github.io/yoga/docs/learn-more/ https://facebook.github.io/yoga/docs/learn-more/

RubenSandwich 10y ago
Thank you for providing these excellent docs from day 1. Can I suggest that you change the background color of the flex item in the jsfiddle example of the default values, https://jsfiddle.net/emilsjolander/jckmwztt/ https://jsfiddle.net/emilsjolander/jckmwztt/, to something besides white as it took me a moment to realize that I was looking at a flex item as white backgrounds are very common.
drcode 10y ago
Is there a plan to add support for the extensions (especially AspectRatio) in React web? I would greatly welcome them.
reitanqild 10y ago
The link[0] to GitHub from the hamburger menu on this page results in a 404. [0]: https://facebook.github.io/yoga/http://github.com/facebook/yoga https://facebook.github.io/yoga/http://github.com/facebook/y...

kowdermeister 10y ago

I already use it in production. I don't really care about old IE users. I agree that not all devs can afford this, but many can.

BinaryIdiot 10y ago
Parent was referring to the current version of IE which still has partial support. I wish it were better supported today. It would sure make my life easier.
- TheAceOfHearts 10y ago
  If you use autoprefixer you can reliably use flexbox, with a few minor exceptions which, IMO, aren't huge dealbreakers.
  - BinaryIdiot 10y ago
    Fair enough I've just kinda avoided things not supported fully in evergreen browsers when I can. I should probably re-examine that more often.
- pault 10y ago
  In my experience it's "good enough". I just shipped a production site with all flexbox layouts and we had to support IE11. I found that the trick was to avoid the shorthand flex attribute and use the explicit flex-* attributes instead.

withjive 10y ago

ReactNative uses Yoga for it's layout. There's an OSX port already in progress, so cross platform Desktop apps using Yoga isn't that far off ;)

venning 10y ago

A lot of real-world usage of flexbox is broken that has nothing to do with IE/Edge. Follow the "Known issues" tab on your caniuse link. Also see Flexbugs [1] for more. I get bitten by #11 and/or #14 on almost every project, which work fine in IE/Edge. [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs

pault 10y ago
Wow, thanks for the link. I use flexbox for layouts and usually can get away with fiddling with wrappers and such until it looks right, but I can easily see myself losing at least a half a day to each one of the bugs on that list. :)