Sohan Shirodkar Sohan Shirodkar - 2 months ago 9
AngularJS Question

What does 'flex-order' actually mean?

Angular Material states that :


Add the flex-order directive to a layout child to set its order position within the layout container. Any integer value from -20 to 20 is accepted.


What does
flex-order
attribute actually do? The statement above confuses me and the example given by them is also not very clear. Is this somewhat related to
z-index
property we have in CSS?

An elaborate explanation with a demo would be appreciated !

Answer

It just defines the order (left to right, top to bottom) of the elements. Here's a simple example - CodePen. It is not related to 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>

We can see that the order of the elements changes when the screen size is lower or higher than width 960px.

From the docs:

enter image description here

Comments