CSS辞典 orderプロパティの解説

フレックスアイテムを配置する順序を指定する「orderプロパティ」の使用方法を記載

対応バージョン：CSS3／2.1

対応ブラウザ
概要・使用方法
- 指定できる値（重ね順）
- サンプルコード

対応ブラウザ

初期値	auto
適用される要素	positionプロパティによって配置された要素
モジュール	CSS Level 2（Revision 1）
継承	なし

概要・使用方法

{ order: 順序;}

「orderプロパティ」は、フレックスボックスアイテムが配置される順序を指定します。初期状態では、すべてのフレックスボックスアイテムの順序は0が設定されています。

指定できる値（重ね順）

数値	フレックスボックスアイテムを配置する順序を整数で指定します。負の値も指定可能です。指定された値が小さい要素から配置されます。同じ順序を指定した場合、HTMLソースに記述された順序で配置されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>orderプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
    .flex-flow-sample-flex1{
      height:200px;
      display: flex;
      flex-flow:row wrap;
    }
    
    .flexbox-item1{
      width:300px;
      height:25px;
      background-color:teal;
      margin:10px;
      padding:25px;
      text-align:center;
    }
    .flexbox-item2{
      width:300px;
      height:25px;
      background-color:silver;
      margin:10px;
      padding:25px;
      text-align:center;
    }   
    .order1{order:1;}
    .order2{order:2;}
    .order10{order:10;}
    </style>
  </head>
  <body>
      <h1> order指定</h1>
      <div class="flex-flow-sample-flex1">
        <div class="flexbox-item1 order10">フレックスボックスアイテム1</div>
        <div class="flexbox-item2 order10">フレックスボックスアイテム2</div>
        <div class="flexbox-item1 order2">フレックスボックスアイテム3</div>
        <div class="flexbox-item2 order10">フレックスボックスアイテム4</div>
        <div class="flexbox-item1 order10">フレックスボックスアイテム5</div>
        <div class="flexbox-item2 order1">フレックスボックスアイテム6</div>
      </div>
  </body>
</html>

フレックスボックスアイテム６と３以外はorder:10として優先順位が低いため、一番優先が高い6→3→HTML記述した順番で表示されます。