“弹性订单”实际上是什么意思？

【问题标题】：What does 'flex-order' actually mean?“弹性订单”实际上是什么意思？
【发布时间】：2016-09-23 10:30:35
【问题描述】：

Angular Material 声明：

将 flex-order 指令添加到布局子级以设置其在布局容器中的顺序位置。接受从 -20 到 20 的任何整数值。

flex-order 属性实际上是做什么的？上面的陈述让我感到困惑，他们给出的例子也不是很清楚。这与我们在 CSS 中的 z-index 属性有些相关吗？

如果有详细的演示说明，将不胜感激！

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案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>

我们可以看到，当屏幕尺寸小于或大于宽度 960px 时，元素的顺序会发生变化。

来自docs：

【讨论】：