Summary of flex layout compatibility issues

1. W3C versions of flex

2009 version
Flag: display: box; or a property that is box-{*} (eg. box-pack)

2011 version
Flags: display: flexbox; or the flex() function or flex-pack property

2012 version
Flags: display: flex/inline-flex; and flex-{*} properties

2014 version
Added new rules for flex item z-index

2015 W3C Editor's Draft
No major changes

PS Please note that the 2015 version is the W3C Editor's Draft. It is just a draft and is still in the revision stage. The opinions of browser vendors have not yet been solicited.

2. Browser compatibility

W3C specification about flex: http://dev.w3.org/csswg/css-flexbox-1/

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

According to CanIUse data, it can be summarized as follows:

IE10 partially supports 2012 and requires the -ms- prefix
Android 4.1/4.2-4.3 partially supports 2009, requires the -webkit- prefix
Safari7/7.1/8 partially supports 2012, requires -webkit- prefix
IOS Safari 7.0-7.1/8.1-8.3 partially supports 2012, requires the -webkit- prefix

So you 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/

3. Browser-compatible flex syntax

The above analysis is very clear. Just use the syntax of the corresponding version for the target that needs to be compatible. The commonly used layout codes are given below:

/* Child elements - evenly divided 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 10 */
  flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* Parent element - horizontal arrangement (main axis) */
.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 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 break */
.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 - horizontal center (only works when the main 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:
    align-items Align the main axis origin direction flex-end Align the main axis extension direction space-between Arrange with equal spacing, leaving no blank at the beginning and end space-around Arrange with equal spacing, leaving blank at the beginning and end*/
}
/* Parent element - vertical arrangement (main axis) */
.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 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 line break */
.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 - vertical center (only works when the main 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 (from top to bottom), used to change the order of 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 (from top to bottom), used to change the order of 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 for the container instead of 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 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 to declare the container to use flex mode when Android compatibility is required (2009 version syntax), and use flex to set the container when Android compatibility is not required (2012 version 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. For specific compatibility test results, please see the Demo

4.Flex layout Demo

Online test: Demo

Test results:

Android 4.2.2 does not support line wrapping
Pseudo-element position performance is inconsistent under Android 4.2.2
The performance of iOS Safari 7.1 is consistent with that of Chrome 28, Chrome 43, and Firefox
Please give me more test results, thank you.

Note: From the test results, we can find that flex layout will treat pseudo-elements as elements to allocate space (the document seems to mention that setting position: fixed/absolute; for pseudo-elements can avoid this situation, but this article has not verified it yet). However, we generally hope that pseudo-elements only have decorative effects and do not affect the layout, which is inconsistent with our expectations. Therefore, be especially careful when using pseudo-elements in flex layouts, perform as many browser compatibility tests as possible, or use float layouts instead.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Vue3.0 uses the vue-grid-layout plug-in to implement drag layout

>>: MySQL advanced features - detailed explanation of the concept and mechanism of data table partitioning