order プロパティ
order プロパティは、
flexコンテナ内での個々の
flexブロックの順序を指定します。
特定のflexブロックに適用されます。
このプロパティの値は、正または負の整数です。 数値が小さいほど、他の要素に対するHTMLコード内の位置に関係なく、 要素は早く配置されます。
構文
セレクタ {
order: 正または負の整数;
}
例
この例では、すべてのブロックに order を使用して配置順序が設定されています。
最初に表示されるのは order が -1 の負の値を持つブロックで、
次に order が 1 のブロック、というように昇順で続きます:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
関連項目
-
flex-directionプロパティ,
flexブロックの軸方向を設定します -
justify-contentプロパティ,
主軸に沿った配置を設定します -
align-itemsプロパティ,
交差軸に沿った配置を設定します -
flex-wrapプロパティ,
flexブロックの折り返し（複数行）を設定します -
flex-flowプロパティ,
flex-direction と flex-wrap の一括指定です -
align-selfプロパティ,
単一のブロックの配置を設定します -
flex-basisプロパティ,
特定のflexブロックのサイズを設定します -
flex-growプロパティ,
flexブロックの伸長率を設定します -
flex-shrinkプロパティ,
flexブロックの縮小率を設定します -
flexプロパティ,
flex-grow、flex-shrink、flex-basis の一括指定です
