Add 2012 spec of flexbox.

[hotmeteor]

As per Chris Coyier's post on the latest spec for flexbox, which is in CR (Candidate Recommendation) status: http://css-tricks.com/old-flexbox-and-new-flexbox/.

Should be a pretty simple addition... display: flex;

[plapier]

Yep. Been meaning to get around to adding the new spec. Flex-box ftw!

Thanks for the issue. I'll get it in soon if someone doesn't beat me to it.

[plapier]

I created mixins for the new flex-box spec. They live in the new-flex-box branch: https://github.com/thoughtbot/bourbon/blob/new-flex-box/app/assets/stylesheets/css3/_flex-box.scss

Though, because the new spec is approaching Candidate Recommendation stage, browser vendors are encouraged to drop vendor prefixes at CR stage. Because of this, these mixins may never actually get introduced into Bourbon master.

As far as I can tell, these mixins only have effect on webkit right now. As of Aug 30th, when I tested mozilla nightly, new flexbox has yet to be implemented.

New flex box is worth playing around with though!

[xzyfer]

FWIW it appears all modern browser now have support (to some extent) for the new syntax, including FF: http://caniuse.com/#feat=flexbox

Since there are performance impacts between the two syntaxes it'd be good to have the choice.
http://css-tricks.com/does-flexbox-have-a-performance-problem/#comment-490956

It's trivial to feature detect the old syntax and and fallback to the old mixins.

[kerns]

Agree with @xzyfer ...look forward to see Bourbon catch up with this.

[plapier]

The real question I was waiting to have answered is weather the new flex-box mixins are needed. Seems like chrome 29.0+ has full unprefixed spec support.

I can't find an conclusive evidence whether iOS7 will have prefixed support or not. If it required prefixes, I would move forward and get the new mixins implemented + backwards compatibility.

iOS7 is also still in beta. So we may have to wait until the stable version is shipped.

[zakdances]

It's probably ok to wait until flexbox mixins can be dropped entirely, however in the meantime, it appears that Chrome is beginning to drop support for the 2009 spec. For example, multiline/wrap flexboxes don't work in Chrome v28+ using the 2009 spec (but they work fine with the 2012 spec). Maybe now's a good time to merge the flexbox 2012 branch into master....

[zakdances]

On second thought, just forget it. As of v.22, Firefox's support for the 2012 spec is a bit spotty (no multiline/wrapping) so that would defeat much of the purpose.

[xzyfer]

The other big consideration is mobile browsers. Although Chrome and FF are picking up the v2 spec, the adoption is going to be slower with mobile webkit-based browsers now that Chrome is on blink. Not to mention the default Android browser is still way behind the pack even in 4.2.

I don't see there being any way around supporting both implementations for a while.

[zakdances]

@xzyfer I'm not certain, but according to caniuse, the new flexbox spec is fully supported on v.7 of both OSX Safari and iOS Safari.

[xzyfer]

@zakdances looks like that might be the case, but the real kicker is Android's default browser which even in 4.2 is running the old flexbox spec. It also a larger market share than IOS so it can't be ignored IMO http://gs.statcounter.com/#mobile_browser-ww-monthly-201301-201306

[hotmeteor]

Agreed. As much as it would be great to drop old flexbox I think it's premature. I find a combo of Modernizr and the two flexbox sets works great.

On Jul 29, 2013, at 7:45 PM, xzyfer notifications@github.com wrote:

@zakdances looks like that might be the case, but the real kicker is Android's default browser which even in 4.2 is running the old flexbox spec. It also a larger market share than IOS so it can't be ignored IMO http://gs.statcounter.com/#mobile_browser-ww-monthly-201301-201306

—
Reply to this email directly or view it on GitHub.

[zakdances]

@hotmeteor Merging the two branches doesn't mean dropping the old flexbox. It just means adding the new one as an option. They don't override each other.

[hotmeteor]

@zakdances Of course - my bad. I mistook this conversation as a consideration to drop support rather than merging.
I've got some of my own mixins for 2009/2011/2012 flexbox functionality, I can chip in on a merge.

[plapier]

I'd appreciate help with creating some kind of hybrid 2008, 2009, 2011, 2012 mixins. If someone is knowledgeable enough to merge the new spec in with the old so that backwards and compatibility is maintained, that would be super helpful.

//@hotmeteor

[hotmeteor]

I'll give it a whirl. I've been working with it a lot lately.
Guess I said that 2 months ago as well... but this time I mean it!

[hotmeteor]

I just forked a new branch called flexbox-unified with an initial commit of the unified flexbox specs. Give it a look, and fixes are welcomed.

[hotmeteor]

For easy reference, flexbox-unified: https://github.com/hotmeteor/bourbon/blob/flexbox-unified/app/assets/stylesheets/css3/_flex-box.scss

[drewlustro]

@hotmeteor been goofing around with this for a few days now... although I haven't tested extensively cross-browser, this updated mixin works great for the 2012 spec as far as i can tell.

[hotmeteor]

@drewlustro Great. I just added some fixes for -ms-flex, coming out of some real usage I've been putting it through on a project. Going to give it some more rigorous testing today, but it's about ready for a pull I think.

[jviotti]

Has this been already merged? Really looking forward to see this implemented in Bourbon's core.

[hotmeteor]

Just did a pull request: #288