'flex-order'實際上是什麼意思？

Question

Angular Material指出：

柔性階指令添加到佈局的孩子設置佈局容器內的順序位置。任何從-20到20的整數值都被接受。

flex-order屬性究竟是幹什麼的？上面的說法讓我感到困惑，他們給出的例子也不是很清楚。這與我們在CSS中的z-index屬性有些相關？

對演示的詳細解釋將不勝感激！

Answer 1

它只是定義了元素的順序（從左到右，從上到下）。這裏有一個簡單的例子 - CodePen。它是而不是與z-index有關。

標記

<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> 

我們可以看到，當屏幕尺寸小於寬度960像素更低或更高的元素的順序變化。

從docs：