CSS3 Flex-compatible notation

Long time not to write blog, before the long not all closed, but with the longer working hours, the accumulation of knowledge and summary is really important. So advice yards farmers every day to take out a little time to summarize something, after you benefit!! Today is still a talk about how flex in CSS3 is handled compatible

Flex is a very useful property, if there is anything that can completely replace the float and position, then it must be, although the lower version of the browser is not supported, but for mobile compatibility is not a problem, but in the Android 4.3 version. That's not going to work, let's just say today if you write flex, you can guarantee compatibility.

Flex is compatible. Because the World Wide Web has been updated many times from 09 to now, so some browsers just support the old syntax of the book, there are many types of flex properties, today mainly said that the common ratio of the set and the center of the two pieces

First, the old grammar

. box{display:-moz-box; /*firefox*/display:-webkit-box; /*safari,opera,chrome*/Display:box;}

2. Container Properties

1) Box-pack Box-pack Property Total 4 values:

. box{Box-pack:start | end | center | justify; /* Spindle alignment: Left-justified (default) | Right Alignment | Center Alignment | Align Left/right */}

3. Child element Properties

Box-flex Properties:

. item{-moz-box-flex:1.0; /*firefox*/-webkit-box-flex:1.0; /*safari,opera,chrome*/box-flex:1.0;}

Second, the new grammar

1. Display properties of the container

. item{-moz-box-flex:1;  /*firefox*/-webkit-box-flex:1;    /*safari,opera,chrome*/box-flex:1;} . box{/* Inline flex*/display:-webkit-inline-flex;/*webkit*/Display:inline-flex;}

2. Container style

.box{    flex-direction: row | row-reverse | column |  column-reverse;    /* Spindle direction: Left to Right (default)  |  right to left  |  top to bottom  |  bottom to top */     flex-wrap: nowrap | wrap | wrap-reverse;    /* Line break: Do not wrap (default)  |  line wrap  |  Wrap and the first line is below */    flex-flow: <flex-direction > | |  <flex-wrap>;    /* spindle direction and line break shorthand */    justify-content:  flex-start | flex-end | center | space-between | space-around;     /* spindle alignment: Align Left (default)  |  right align  |  Center align  |  justify  |  average distribution */     align-items: flex-start | flex-end | center | baseline  | stretch;    /* Cross axis alignment: Top align (default)  |  bottom align  |  Center align  |  Top and bottom alignment and full  |  Text Baseline Alignment */    align-content: flex-start | flex-end | center  | space-between | space-around | stretch;    /* Multi-spindle alignment: Top align (default)  |  bottom align  |  Center align  |  up and down align and fill  |  up/down average */}

3. Child element Properties

. item{    order: <integer>;    /* sort: The smaller the number, the lower the row, the default is 0*/     flex-grow: <number>; /* default 0 */    / * Zoom In: Default 0 (that is, if there is no space to enlarge, the value is 1 to enlarge, 2 is 1 double size, and so on) */    flex-shrink: <number>; /*  default 1 */    /* Reduction: Default 1 (Shrinks if space is low, 0 does not shrink) */     flex-basis: <length> | auto; /* default auto */     /* fixed size: The default is 0, you can set the PX value, or you can set the percentage size */    flex: none | [ < ' Flex-grow ' > < ' Flex-shrink ' >? | |  < ' flex-basis ' > ]    /*flex-grow, flex-shrink  and   Shorthand for flex-basis, default value is 0 1 auto,*/    align-self: auto | flex-start  | flex-end | center | baseline | stretch;    /* Individual alignment: Auto (default)  |  top align  |  bottom align  |  Center snap  |  align up and down  |  text baseline alignment */} 

Compatible wording:

1. Compatible wording of the box

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

2. Compatible 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 10 */               Flex: 1;         /* new, spec - opera  12.1, firefox 20+ */  } 

The main part I want to say is here.

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 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- */         } 

If you are not sure of this sequence, you will never be fully compatible with the style.

This article is from the "road Distance horse horsepower" blog, please be sure to keep this source http://listen1982.blog.51cto.com/11775763/1793460

CSS3 Flex-compatible notation