Deep understanding of Flex compatibility in CSS Series

With the increase in the number of pages you have written, there are a lot of CSS compatibility issues. These compatibility issues, are inevitable, because the technology is constantly improving, so in order not to be eliminated, we will have to do some compatibility treatment. This article mainly introduces the compatibility of the CSS in the flex, the need for friends can refer to, the following to see together.

Objective

I have used a lot of flex layouts when I write a page and feel very useful. Here is an article about a nice flex layout.

Flex layout Tutorial Want to know can take a look at this blog, or own Baidu, here first to do more introduction, we mainly say a flex layout compatibility issues.

Why?

You might want to ask, why is there a compatibility problem with flex layouts?

There is a compatibility issue because the technology is constantly being updated, and some old browsers only support the old syntax, so so-called compatibility issues arise.

What?

So what's the old and new version?

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

Android

Support for old version Display:-webkit-box from 2.3 onwards;

4.4 started to support standard version Display:flex;

Ios

6.1 Start support for old version display:-webkit-box;

7.1 started to support standard version Display:flex;

Pc

Ie10 began to support it, but IE10 was in the form of-ms.

Here are the support scenarios for each browser

How?

So how do we do the compatibility of the wording?

Compatibility of boxes

. 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 *    /display:-webkit-flex;/* New version syntax: Chrome 21+ */    Display:flex;         /* New version syntax: Opera 12.1, Firefox 22+ */}

Compatibility notation for child elements

. 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 ten/      flex:1;              /* NEW, Spec-opera 12.1, Firefox 20+ */}

This kind of compatibility is not necessarily effective. Especially in the bottom version of the Android system. Because of what? Because all are backwards compatible, the order of writing must be written well before it works. is to write the old grammar at the bottom, the 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 compatibility should be the same way:

.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 Ten */}.flex1 {-webkit-flex:1;                /* Chrome */-ms-flex:1 */IE ten/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-*/}