Flex Layout compatibility issues

I. Flex in all editions version

Logo: Display:box; Or a property which is box-{*} (eg. box-pack)

Version

Logo: Display:flexbox; or the flex () function or Flex-pack property

version

Logo: Display:flex/inline-flex; and flex-{*} Properties

Version

Added rules for flex item Z-index

Editor ' s Draft

No big changes.

P.S. Note 2015 is the Editor's Draft, just a draft, is still in the revision phase, has not solicited the views of browser vendors

Two. Browser compatibility

About Flex's specifications: http://dev.w3.org/csswg/css-flexbox-1/

Browser compatibility can refer to caniuse:http://caniuse.com/#feat =flexbox

According to the Caniuse data can be summarized as follows:

• IE10 partial Support 2012, requires-ms-prefix

• android4.1/4.2-4.3 Partial support , need-webkit-prefix

• SAFARI7/7.1/8 partial support, need-webkit-prefix

• IOS safari7.0-7.1/8.1-8.3 section supports 2012, requires-webkit-prefix

So we need to consider the new version 2012:http://www.w3.org/tr/2012/cr-css3-flexbox-20120918/

And Android needs to consider the old version 2009:http://www.w3.org/tr/2009/wd-css3-flexbox-20090723/

Three. browser-compatible flex syntax

It is clear from the above that it is good to use the corresponding version of the syntax for targets that need to be compatible, and here are the common layout codes:

/*child elements-average columns*/. Flex1{-webkit-box-flex:1;/*Old-ios 6-, Safari 3.1-6*/-moz-box-flex:1;/*Old-firefox 19-*/width:20%;/*for old syntax, otherwise collapses.*/-webkit-flex:1;/*Chrome*/-ms-flex:1;/*IE Ten*/Flex:1;/*NEW, Spec-opera 12.1, Firefox 20+*/}/*parent Element-horizontal arrangement (spindle)*/. Flex-h{Display:Box;/*old-android 4.4-*/Display:-webkit-box;/*Old-ios 6-, Safari 3.1-6*/Display:-moz-box;/*Old-firefox 19-(buggy but mostly works)*/Display:-ms-flexbox;/*Tweener-ie Ten*/Display:-webkit-flex;/*New-chrome*/Display:Flex;/*NEW, Spec-opera 12.1, Firefox 20+*/  /*version 09*/-webkit-box-orient:Horizontal;/*version 12*/-webkit-flex-direction:Row;-moz-flex-direction:Row;-ms-flex-direction:Row;-o-flex-direction:Row;flex-direction:Row;}/*parent Element-cross-line wrapping*/. FLEX-HW{/*version 09*/  /*-webkit-box-lines:multiple;*/  /*version 12*/-webkit-flex-wrap:Wrap;-moz-flex-wrap:Wrap;-ms-flex-wrap:Wrap;-o-flex-wrap:Wrap;Flex-wrap:Wrap;}/*parent Element-centered horizontally (the spindle is horizontal only)*/. FLEX-HC{/*version 09*/-webkit-box-pack:Center;/*version 12*/-webkit-justify-content:Center;-moz-justify-content:Center;-ms-justify-content:Center;-o-justify-content:Center;justify-content:Center;/*the other values are as follows: Align-items spindle origin Direction Alignment flex-end spindle extension direction alignment space-between equal spacing arrangement, without leaving white space-around spacing Arrange, leave the white*/}/*parent Element-vertical arrangement (spindle)*/. Flex-v{Display:Box;/*old-android 4.4-*/Display:-webkit-box;/*Old-ios 6-, Safari 3.1-6*/Display:-moz-box;/*Old-firefox 19-(buggy but mostly works)*/Display:-ms-flexbox;/*Tweener-ie Ten*/Display:-webkit-flex;/*New-chrome*/Display:Flex;/*NEW, Spec-opera 12.1, Firefox 20+*/  /*version 09*/-webkit-box-orient:Vertical;/*version 12*/-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;-o-flex-direction:column;flex-direction:column;}/*parent Element-Vertical line wrapping*/. FLEX-VW{/*version 09*/  /*-webkit-box-lines:multiple;*/  /*version 12*/-webkit-flex-wrap:Wrap;-moz-flex-wrap:Wrap;-ms-flex-wrap:Wrap;-o-flex-wrap:Wrap;Flex-wrap:Wrap;}/*Parent Element-center vertically (the spindle is horizontal only)*/. FLEX-VC{/*version 09*/-webkit-box-align:Center;/*version 12*/-webkit-align-items:Center;-moz-align-items:Center;-ms-align-items:Center;-o-align-items:Center;Align-items:Center;}/*child element-Displays the 1th position from left to right (top down) for changing the source document order display*/. Flex-1{-webkit-box-ordinal-group:1;/*Old-ios 6-, Safari 3.1-6*/-moz-box-ordinal-group:1;/*Old-firefox 19-*/-ms-flex-order:1;/*Tweener-ie Ten*/-webkit-order:1;/*New-chrome*/Order:1;/*NEW, Spec-opera 12.1, Firefox 20+*/}/*child element-Displays the 2nd position from left to right (top down) for changing the source document order display*/. Flex-2{-webkit-box-ordinal-group:2;/*Old-ios 6-, Safari 3.1-6*/-moz-box-ordinal-group:2;/*Old-firefox 19-*/-ms-flex-order:2;/*Tweener-ie Ten*/-webkit-order:2;/*New-chrome*/Order:2;/*NEW, Spec-opera 12.1, Firefox 20+*/}

For better compatibility, we need to declare flex-h/flex-v to the container instead of the General Flex:

/*parent Element-flex container*/. Flex{Display:Box;/*old-android 4.4-*/Display:-webkit-box;/*Old-ios 6-, Safari 3.1-6*/Display:-moz-box;/*Old-firefox 19-(buggy but mostly works)*/Display:-ms-flexbox;/*Tweener-ie Ten*/Display:-webkit-flex;/*New-chrome*/Display:Flex;/*NEW, Spec-opera 12.1, Firefox 20+*/}

Therefore, it is recommended that you use the Flex mode in the Flex-h/flex-v declaration container when Android is required (version 2009 syntax) and use Flex to set up the container when you do not need to be compatible with Android (version 2012 syntax)

Note: The above code is not fully compatible with each high-end browser, but is better than any other existing code compatibility, specific compatibility test results see demo

Four. Flex Layout Demo

Online testing: Demo

Test results:

• Android4.2.2 does not support line wrapping

• Inconsistency of pseudo-element position in Android4.2.2

• IOS Safari 7.1 shows the same performance as Chrome28, Chrome43, and Firefox

• More test results Please feedback to me, thank you

Note : From the test results you can see that the flex layout allocates the pseudo elements as elements to allocate space (the document seems to have a reference to the pseudo-element setting position:fixed/absolute; You can avoid this situation, this article is not verified), But we generally hope that the pseudo-elements will only be decorative, not affect the layout, which is inconsistent with our expectations. So be very careful when there are pseudo elements in the flex layout, do as many browser compatibility tests as possible, or use the float layout

Transferred from:http://www.tuicool.com/articles/Afq6Bzq

Flex Layout compatibility issues