Old CSS Flexbox syntax case and new CSS Flexbox syntax case

Article Introduction: Richard Shepherd wrote an essay in Smashingmagazine.com in 2011. The article comes with a 2011-year version of the syntax, but focuses more on the syntax of the older version of 2009.

It is well known that the "Flexbox" (Full name: CSS flexible box Layout Module) has undergone many changes over the past three years. The changes are up to specification and what browsers support Flexbox.

how to Tell

If you use Google to search for 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 are 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 specification (when writing this article).

outdated tutorials and examples

These things are great when they're created, but they're a bit outdated for now.

Flexie-a JavaScript script that uses the old version of 2009 syntax.

Richard Shepherd wrote an essay in smashingmagazine.com in 2011. The article comes with a 2011-year version of the syntax, but focuses more on the syntax of the older version of 2009.

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

My first contact with Flexbox was a tutorial from Paul Irish , who used the 2009 grammar version. The Flexbox features are described at the top and are linked to an article in the 2011 grammar version that was introduced by Stephen Hay .

Support

Browser support Terms become a little more complicated.

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

Although the old syntax is well supported, it is not a smart thing to use the old syntax. The old specification is always going to be eliminated. Browsers may also support the old syntax in the future. At the very least, the new syntax is easier to understand and to achieve more deeply and consistently. Browsers do not support flexbox new specifications, mainly because he is in CR state, when he becomes the specification, will get the browser perfect support.

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

The 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. All two grammars can do this easily. They have all done a full test of the browser.

Old Grammar Cases New Syntax Case

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!

If you want to reprint, please indicate the source:

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