Deep research on flex compatibility in CSS

Objective

I use a lot of flex layout when I write the page, I feel very useful. Attached below is a nice flex layout introduction article.

Flex layout Tutorial Want to know to see this blog, or their own Baidu, here to do more introduction, we mainly say a flex layout compatibility problem.

Why?

You may want to ask, flex layout Why there is a compatibility problem ah?

Compatibility issues arise because technology is constantly being updated, and some older browsers only support the way the old syntax is written, so there are so-called compatibility issues.

What

So what's the old and new version?

Flex layout is divided into old version dispaly:box, transition version Dispaly:flex box, and now standard version Display:flex;. So if you're just writing a new version of the syntax, there's definitely a compatibility problem.

Android

Support the old version of Display:-webkit-box at the beginning of 2.3;

4.4 Start support standard version Display:flex;

Ios

6.1 To support the old version of Display:-webkit-box;

7.1 Start support standard version Display:flex;

Pc

Ie10 began to support, but the IE10 is-ms form.

The following are the support scenarios for each browser

How?

So how do we do the writing of compatibility?

The compatibility of the box

The code is as follows	Copy Code
. box{ Display:-webkit-box; /* old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */ Display:-moz-box; * Old version syntax: Firefox (Buggy) * * Display:-ms-flexbox; /* Mixed version syntax: IE 10 */ Display:-webkit-flex;/* new version syntax: Chrome 21+ * * Display:flex; /* New version syntax: Opera 12.1, Firefox 22+ * * }

The compatibility of child elements

The code is as follows	Copy Code
. flex1{ -webkit-box-flex:1/* Old-ios 6-, Safari 3.1-6 * -moz-box-flex:1; /* Old-firefox 19-* * -webkit-flex:1; /* Chrome * * -ms-flex:1/* IE 10 * * Flex:1; * NEW, Spec-opera 12.1, Firefox 20+ * * }

This type of compatibility is not necessarily effective. Especially in the bottom version of the Android system. Because of what? Because all are backward-compatible, so the order of writing must be written to work. is to write the old grammar at the bottom, individual incompatible mobile settings will be recognized, which is the old syntax, you understand. Those with box must be written at the bottom.

So the above compatible writing should be the case:

The code is as follows	Copy Code

The code is as follows

Copy Code

. box{ Display:-webkit-flex; /* New version syntax: Chrome 21+ * * Display:flex; /* New version syntax: Opera 12.1, Firefox 22+ * * Display:-webkit-box; /* old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */ Display:-moz-box; * Old version syntax: Firefox (Buggy) * * Display:-ms-flexbox; /* Mixed version syntax: IE 10 */ } . flex1{ -webkit-flex:1; /* Chrome * * -ms-flex:1/* IE 10 * * Flex:1; * NEW, Spec-opera 12.1, Firefox 20+ * * -webkit-box-flex:1/* Old-ios 6-, Safari 3.1-6 * -moz-box-flex:1; /* Old-firefox 19-* * }