Shulou(Shulou.com)06/03 Report--

This article will explain in detail about the compatibility of flexbox layout. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Flex layout has been available since 2009, and it is now June 8, 2015. Using the latest flex syntax, you will find that the support is not good, even on "high-end" browsers, such as Chrome, Firefox, Safari, Android, and IOS Safari.

The existing code on the Internet is full of various versions, it is generally no problem to run under Chrome, and Firefox is generally fine, but it is very weak under Android and IOS Safari. The reason for this situation is mainly due to historical reasons. During the period from 2009 to 2015, the W3C specification was updated many times, and the degree of browser support was different.

I. flex of each version of W3C

2009 version

Logo: display: box; or a property that is box- {*} (eg. Box-pack)

2011 version

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

2012 version

Flag: display: flex/inline-flex; and flex- {*} properties

2014 version

New provision for flex z-index has been added

2015 W3C Editor's Draft

No major changes.

P.S. Note that 2015 is the W3C Editor's Draft, which is only a draft, which is still in the stage of modification and modification, and has not yet solicited the opinions of browser suppliers.

two。 Browser compatibility

On the W3C specification of flex: http://dev.w3.org/csswg/css-flexbox-1/

For browser compatibility, please refer to CanIUse: http://caniuse.com/#feat=flexbox

Based on the data from CanIUse, it can be summarized as follows:

IE10 partially supports 2012 and requires-ms- prefix

Android4.1/4.2-4.3part supports 2009, requires-webkit- prefix

Safari7/7.1/8 partially supports 2012 and requires-webkit- prefix

IOS Safari7.0-7.1 webkit- part 8.1-8.3 supports 2012 and requires-Universe prefix

So you need to consider the new version 2012: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/

Android needs to consider the old version 2009: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

three。 Browser compatible flex syntax

As the above analysis is very clear, it would be nice to use the corresponding version of syntax for the targets that need to be compatible. Here are the commonly used layout codes:

/ child elements-average column /

.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 10 /

Flex: 1; / NEW, Spec-Opera 12.1, Firefox 20 + /

}

/ parent element-arrange horizontally (spindle) /

. flex-h {

Display: box; / OLD-Android 4.4-/

Display:-webkit-box; / OLD-iOS 6muri, Safari 3.1-6 /

Display:-moz-box; / OLD-Firefox 19-(buggy but mostly works) /

Display:-ms-flexbox; / TWEENER-IE 10 /

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-horizontal 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 principal axis is horizontal) /

. 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

/ other values are as follows:

Alignment of align-items spindle origin

Alignment of flex-end spindle extension direction

Space-between is evenly spaced, leaving no white space at the beginning and end.

Space-around are arranged at equal intervals, leaving white space at the beginning and end.

/

}

/ parent element-arranged vertically (spindle) /

. flex-v {

Display: box; / OLD-Android 4.4-/

Display:-webkit-box; / OLD-iOS 6muri, Safari 3.1-6 /

Display:-moz-box; / OLD-Firefox 19-(buggy but mostly works) /

Display:-ms-flexbox; / TWEENER-IE 10 /

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 Wrap /

. 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-centered vertically (principal axis is horizontal) /

. 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-displayed in the first position from left to right (top to bottom), used to change the order of the source document 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 10 /

-webkit-order: 1; / NEW-Chrome /

Order: 1; / NEW, Spec-Opera 12.1, Firefox 20 + /

}

/ child element-displayed in the second position from left to right (top to bottom), used to change the order of the source document 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 10 /

-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 normal flex:

/ parent element-flex container /

.flex {

Display: box; / OLD-Android 4.4-/

Display:-webkit-box; / OLD-iOS 6muri, Safari 3.1-6 /

Display:-moz-box; / OLD-Firefox 19-(buggy but mostly works) /

Display:-ms-flexbox; / TWEENER-IE 10 /

Display:-webkit-flex; / NEW-Chrome /

Display: flex; / NEW, Spec-Opera 12.1, Firefox 20 + /

}

Therefore, it is recommended to use flex-h/flex-v declaration container to use flex mode when Android compatibility is needed (version 2009 syntax) and flex to set container when Android compatibility is not needed (version 2012 syntax)

Note: the code given above is not fully compatible with all high-end browsers, but it is more compatible than any other existing code.

This is the end of this article on "how is the compatibility of flexbox layout?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.