The company will make a webpage embedded in the app application of the mobile phone and ask if flexbox is compatible if it is displayed on Android.

  css3, question

By the way, is compatible display normal on apple?

/Sub-Element-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-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 Wrap/
.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 (the main axis is horizontal before it takes effect)/
.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 main axis origin direction alignment
 Flex-end spindle extension alignment
 Space-between are arranged at equal intervals without leaving white at the beginning and end.
 Space-around are arranged at equal intervals, leaving the beginning and the end blank.

*/
}
/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 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-vertically centered (the main axis 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;
}
/Sub-element-displays in the first position from left to right (top to bottom) for changing the sequential display of source documents/
.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+/
}
/Sub-element-displays in the 2nd position from left to right (top to bottom) for changing the sequential display of source documents/
.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+/
}