フレキシブルボックス内の要素の表示順序を指定するには?
要素書式
対応ブラウザ
値一覧
値 | 内容 |
整数値 | 要素がどのグループに属するかを指定します。 「flex-order」プロパティの初期値は0となります。 |
解説文
フレキシブルボックスはボックスのレイアウト設定をより簡単に指定できる、柔軟なボックスのことです。
flex-orderプロパティを使うと、フレキシブルボックス内の要素に対して、順序グループの番号を指定できます。
順序グループを指定することで、値の小さいグループから順に要素を並べることができます。同じ順序グループに属する要素は、ソースコード上の記述順に表示されます。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
#container{
display:-moz-flexbox;
display:-webkit-flexbox;
display:-o-flexbox;
display:-ms-flexbox;
display: flexbox;
height: 200px;
padding: 10px;
background-color: #cccccc;
}
#y{
-moz-flex-order:2;
-webkit-flex-order:2;
-o-flex-order:2;
-ms-flex-order:2;
flex-order:2;
background-color:yellow;
width:100px;
}
#r{
-moz-flex-order:1;
-webkit-flex-order:1;
-o-flex-order:1;
-ms-flex-order:1;
flex-order:1;
background-color:red;
width:200px;
}
#g{
-moz-flex-order:1;
-webkit-flex-order:1;
-o-flex-order:1;
-ms-flex-order:1;
flex-order:1;
background-color:green;
}
</style>
</head>
<body>
<div id="container">
<div id="y">サンプル黄</div>
<div id="r">サンプル赤</div>
<div id="g">サンプル緑</div>
</div>
</body>
</html>
関連項目
なし