Sohan Shirodkar Sohan Shirodkar - 3 months ago 12
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
attribute actually do? The statement above confuses me and the example given by them is also not very clear. Is this somewhat related to
property we have in CSS?

An elaborate explanation with a demo would be appreciated !


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.


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

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