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

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

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値auto
適用される要素positionプロパティによって配置された要素
モジュールCSS Level 2(Revision 1)
継承なし

概要・使用方法

{ <span class="fz-20px"><span class="fz-20px">order</span></span>: 順序;}Code language: HTML, XML (xml)

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

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

実行結果

order指定

フレックスボックスアイテム1
フレックスボックスアイテム2
フレックスボックスアイテム3
フレックスボックスアイテム4
フレックスボックスアイテム5
フレックスボックスアイテム6

chrome 実行サンプル

orderプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

orderプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

orderプロパティのedgeブラウザの実行結果

opera 実行サンプル

orderプロパティのoperaブラウザの実行結果

要素の順番が変わるわけではなく、あくまで表示変更されるため読み上げ環境などの環境においては、順番どおりにはならない可能性があります。

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す