2016-09-23 17 views
1

Angular Materialと述べている:「フレックスオーダー」は実際には何を意味していますか?

は、レイアウトコンテナ内の順序位置を設定するために、レイアウトの子供にフレックスorderディレクティブを追加します。 -20から20までの任意の整数値が受け入れられます。

flex-order属性は実際に何をしますか?上記の声明は私を混乱させ、彼らによって与えられた例もあまり明確ではありません。これはCSSにあるz-indexのプロパティと多少関連していますか?

デモで詳細な説明をいただければ幸いです!

答えて

2

要素の順序(左から右、上から下)を定義するだけです。ここに簡単な例があります - CodePenz-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から

enter image description here

関連する問題