Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

/* Kindelemente - gleichmäßig aufgeteilte Spalten*/
.flex1 {
  -webkit-box-flex: 1; /* ALT – iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1; /* ALT – Firefox 19- */
  Breite: 20 %; /* Für alte Syntax, sonst bricht es zusammen. */
  -webkit-flex: 1; /* Chrom */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
}
/* Übergeordnetes Element - horizontale Anordnung (Hauptachse) */
.flex-h {
  Anzeige: Box; /* ALT - Android 4.4- */
  Anzeige: -webkit-box; /* ALT – iOS 6-, Safari 3.1-6 */
  Anzeige: -moz-box; /* ALT – Firefox 19- (fehlerhaft, funktioniert aber größtenteils) */
  Anzeige: -ms-flexbox; /* TWEENER – IE 10 */
  Anzeige: -webkit-flex; /* NEU – Chrome */
  Anzeige: flex; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
  /* Version 09 */
  -webkit-box-orient: horizontal;
  /* Version 12 */
  -webkit-flex-direction: Zeile;
  -moz-flex-direction: Reihe;
  -ms-flex-direction: Zeile;
  -o-flex-direction: Reihe;
  Flex-Richtung: Reihe;
}
/* Übergeordnetes Element - horizontaler Zeilenumbruch */
.flex-hw {
  /* Version 09 */
  /*-webkit-box-lines: mehrere;*/
  /* Version 12 */
  -webkit-flex-wrap: umschließen;
  -moz-flex-wrap: umschließen;
  -ms-flex-wrap: umschließen;
  -o-flex-wrap: umwickeln;
  Flex-Wrap: Umwickeln;
}
/* Übergeordnetes Element - horizontale Mitte (funktioniert nur, wenn die Hauptachse horizontal ist) */
.flex-hc {
  /* Version 09 */
  -WebKit-Box-Pack: Mitte;
  /* Version 12 */
  -webkit-justify-content: zentrieren;
  -moz-justify-content: zentrieren;
  -ms-justify-content:center;
  -o-justify-content: zentrieren;
  Inhalt ausrichten: zentriert;
  /* Andere Werte sind wie folgt:
    align-items Richtet die Ursprungsrichtung der Hauptachse aus. flex-end Richtet die Verlängerungsrichtung der Hauptachse aus. space-between Mit gleichem Abstand anordnen, sodass am Anfang und Ende keine Leerzeichen bleiben. space-around Mit gleichem Abstand anordnen, sodass am Anfang und Ende keine Leerzeichen bleiben.*/
}
/* Übergeordnetes Element - vertikale Anordnung (Hauptachse) */
.flex-v {
  Anzeige: Box; /* ALT - Android 4.4- */
  Anzeige: -webkit-box; /* ALT – iOS 6-, Safari 3.1-6 */
  Anzeige: -moz-box; /* ALT – Firefox 19- (fehlerhaft, funktioniert aber größtenteils) */
  Anzeige: -ms-flexbox; /* TWEENER – IE 10 */
  Anzeige: -webkit-flex; /* NEU – Chrome */
  Anzeige: flex; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
  /* Version 09 */
  -webkit-box-orient: vertikal;
  /* Version 12 */
  -webkit-flex-direction: Spalte;
  -moz-flex-direction: Spalte;
  -ms-flex-direction: Spalte;
  -o-flex-direction: Spalte;
  Flex-Richtung: Spalte;
}
/* Übergeordnetes Element - vertikaler Zeilenumbruch */
.flex-vw {
  /* Version 09 */
  /*-webkit-box-lines: mehrere;*/
  /* Version 12 */
  -webkit-flex-wrap: umschließen;
  -moz-flex-wrap: umschließen;
  -ms-flex-wrap: umschließen;
  -o-flex-wrap: umwickeln;
  Flex-Wrap: Umwickeln;
}
/* Übergeordnetes Element - vertikal zentriert (funktioniert nur, wenn die Hauptachse horizontal ist) */
.flex-vc {
  /* Version 09 */
  -webkit-box-align: zentriert;
  /* Version 12 */
  -webkit-align-items: zentrieren;
  -moz-align-items: zentrieren;
  -ms-align-items: zentrieren;
  -o-align-items: zentrieren;
  Elemente ausrichten: zentrieren;
}
/* Untergeordnetes Element – ​​wird an der ersten Position von links nach rechts (von oben nach unten) angezeigt und dient zum Ändern der Anzeigereihenfolge des Quelldokuments */
.flex-1 {
  -webkit-box-ordinal-group: 1; /* ALT – iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1; /* ALT – Firefox 19- */
  -ms-flex-order: 1; /* TWEENER – IE 10 */
  -webkit-order: 1; /* NEU – Chrome */
  Reihenfolge: 1; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
}
/* Untergeordnetes Element – ​​wird an der zweiten Position von links nach rechts (von oben nach unten) angezeigt und dient zum Ändern der Anzeigereihenfolge des Quelldokuments */
.flex-2 {
  -webkit-box-ordinal-group: 2; /* ALT – iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2; /* ALT – Firefox 19- */
  -ms-flex-order: 2; /* TWEENER – IE 10 */
  -webkit-order: 2; /* NEU – Chrome */
  Reihenfolge: 2; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
}

/* Übergeordnetes Element - Flex-Container */
.flex {
  Anzeige: Box; /* ALT - Android 4.4- */
  Anzeige: -webkit-box; /* ALT – iOS 6-, Safari 3.1-6 */
  Anzeige: -moz-box; /* ALT – Firefox 19- (fehlerhaft, funktioniert aber größtenteils) */
  Anzeige: -ms-flexbox; /* TWEENER – IE 10 */
  Anzeige: -webkit-flex; /* NEU – Chrome */
  Anzeige: flex; /* NEU, Spezifikation – Opera 12.1, Firefox 20+ */
}