Was bedeutet "Flex-Order" eigentlich?

Question

Angular Material heißt es:

die flex-order-Richtlinie zu einem Layout Kind In seiner Auftragslage innerhalb des Layoutcontainer eingestellt. Jede ganze Zahl von -20 bis 20 wird akzeptiert.

Was bewirkt das Attribut flex-order eigentlich? Die obige Aussage verwirrt mich und das von ihnen gegebene Beispiel ist auch nicht sehr klar. Ist das etwas mit z-index Eigenschaft, die wir in CSS haben?

Eine ausführliche Erklärung mit einer Demo würde geschätzt werden!

Answer 1

Es definiert nur die Reihenfolge (von links nach rechts, von oben nach unten) der Elemente. Hier ist ein einfaches Beispiel - CodePen. Es ist nicht bezogen auf z-index.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row"> 
    <div style="background:purple" flex flex-order="0" flex-order-gt-sm="1"></div> 
    <div style="background:yellow" flex flex-order="1" flex-order-gt-sm="0"></div> 
</div> 

Wir können sehen, dass die Reihenfolge der Elemente ändert, wenn die Bildschirmgröße niedriger oder höher als 960 x Breite ist.

Vom docs: