The "old" Flexbox and the "new" Flexbox

This article by the desert according to Chris Coyier "old" Flexbox and "New" Flexbox "translation, the entire translation with our own understanding and thinking, if the translation is not good or wrong place also please peer friends pointing. If you want to reprint this translation, please specify the English source: Http://css-tricks.com/old-flexbox-and-new-flexbox, as well as the author's relevant information

--chris Coyier

--Translator: the Desert

As we all know, "Flexbox" (Full name: CSS flexible box Layout Module) has undergone many changes in the past three years. The changes are up to spec and what browser support Flexbox.

How to Tell

If you use Google search Flexbox, you will find a lot of outdated information. This will tell you how to quickly identify the information you need.

If you are looking for blog information about Flexbox, you see "display:box;" or the "box-{*}" attribute, you're looking at the 2009 version of Flexbox.

If you are looking for blog information about Flexbox, you see "display:flexbox;" or the flex () function, you're looking at the 2011 version of Flexbox.

If you are looking for blog information about Flexbox, you see "Display:flex;" And the "flex-{*}" attribute, you are looking at the current (when writing this article) specification.

Outdated tutorials and examples

These things were great when they were created, but they're a bit out of date for now.

flexie--a JavaScript script that uses the old version syntax for 2009.

Richard Shepherd wrote an essay in Smashingmagazine.com in 2011. The article included references to the 2011 version of the syntax, but more focused on the old version of the 2009 syntax.

Stephen Hay wrote an earlier tutorial on Flexbox, which introduced the 2009-year-old version of grammar, followed by a follow-up to the 2011 version of Flexbox and shared.

My first contact with Flexbox was a tutorial shared by Paul Irish, who used the 2009 grammar version. The top section describes the features of the Flexbox and links to an article in which Stephen Hay introduces the 2011 grammar version.

Support

Browser support terms get a little complicated.

2009 old version syntax to get better browser support: Chrome, firefox2+, safari3.1+ ... In addition to IE9 and opera almost all browsers are supported. What I call "support", the actual implementation and support will be a little different (therefore, some need to rewrite).

Although the old syntax is well supported, using the old syntax is not a clever thing to do. Old specifications are always eliminated. Browsers may also support the old syntax in the future. At the very least, the new syntax is easier to understand and more in-depth, more consistent implementation. The browser does not support Flexbox the new specification, mainly because he is in the CR state, when he becomes the specification, will get the perfect support of the browser.

Browsers supported by the new version syntax: chrome21+, opera (opera mobile12.1+ and blackberry10+).

Intermediate version of Flexbox (2011 version) will be run in IE10: Display:flexbox;

DEMO

I've been helping people solve a layout that creates fluid-fixed-fluid. This can be done easily with two grammars. They are fully tested on the browser.

Old grammar case New syntax case

Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!

If you want to reprint please indicate the source:

English Original: Http://css-tricks.com/old-flexbox-and-new-flexbox

Chinese translation: http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html

The "old" Flexbox and the "new" Flexbox