Display:flex and Display:box layout browser compatibility analysis

Display:flex and Display:box can be used for flexible layouts, unlike Display:box, which is a 2009-year-old name that is obsolete and requires a prefix; Display:flex is named after 2012 years. In the actual test Display:flex can not completely replace the Display:box. Display:flex browser compatibility is more troublesome.

1. About Display:flex

For responsive layouts, it is convenient to use Flex, but its compatibility is also an issue worth considering.

<Divclass= "Container">        <Divclass= "Item"style= "background: #f00"></Div>        <Divclass= "Item"style= "background: #000"></Div>        <Divclass= "Item"style= "background: #08c"></Div>        <Divclass= "Item"style= "background: #a00"></Div>        <Divclass= "Item"style= "background: #0f0"></Div>    </Div>

. container{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;margin:0 Auto; Width:100%;height:200px;background: #eee;}. item{flex:1;height:200px;}

　　

For PC-side, General Chrome (Beta version: 49.0.2623.110 m) and Firefox (Beta version: 49.0.2) are well supported. IE is not supported, the display is the sequence of the width of the 100% module.

For the mobile side:

(1) The native Safari browser of the above code is supported; The UC browser is well supported; The browser is not supported (test model: Apple 4s)

(2) Android native browser does not support, can display the module normally, the document flow sequence; The UC browser is not supported and appears blank; browser not supported (test model: Huawei Glory 6 plus,android4.4.2)

2. About Display:box

<div class= "container" ><div class= "Item item1" style= "background: #f00" ></div><div class= "item Item2 "style=" background: #000 "></div><div class=" Item Item3 "style=" background: #08c "></div> </div>

. container{display:-moz-box;display:-webkit-box;display:box;width:100%;height:200px;}. item{height:200px;}. Item1{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}. Item2{-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}. Item3{-moz-box-flex:3;-webkit-box-flex:3;box-flex:3;}

PC-side: Chrome (beta: 49.0.2623.110 m) and Firefox (Beta version: 49.0.2) are well supported. IE is not supported, the display is the sequence of the width of the 100% module.

Mobile side:

(1) The native Safari browser of the above code is supported; The UC browser supports it very well (test model: Apple 4s)

(2) native browser support for Android; UC Browser not supported, display blank (test model: Huawei Glory 6 plus:android4.4.2)

UC Browser is support Display:box; The reason why it is not shown on my phone is because the page is missing Meta,<meta name= "viewport" content= "Width=device-width"/> Plus it will show up normally. Specifically why I have to add meta on my phone, I don't know--_--

In general, regardless of IE browser, the use of any PC side can be used, generally use Display:flex, mobile Android UC only support Display:box,ios Ucdisplay:box and Display:flex two are supported.

3. Browser-compatible wording

. container{display:-webkit-box;/* Chrome 4+, Safari 3.1, IOS Safari 3.2+ */display:-moz-box;/* Firefox 17-*/Displa Y:-webkit-flex; /* Chrome 21+, Safari 6.1+, IOS Safari 7+, Opera 15/16 */display:-moz-flex; /* Firefox + */display:-ms-flexbox; /* IE ten */Display:flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */}

　　

　　

Display:flex and Display:box layout browser compatibility analysis