Summary of flex layout compatibility issues

/* 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+ */
}

/* 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+ */
}