CSS - order

• トップ
• CSSリファレンス
• order

概要

属性名	order
値	<integer>
初期値	0
適用可能要素	フレックスアイテム、またはフレックスコンテナ内の絶対位置指定要素
継承	継承しない
メディア	visual
アニメーション	可能

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	10(-ms-flex-order) 11	20	21(-webkit) 29	15(-webkit) 17	6.1(-webkit) 9

説明

フレックスアイテムや、フレックスコンテナ内の絶対位置指定(position:absolute)の要素に対して、表示する順序を指定します。指定した数字の小さな方から表示されます。負数を指定することも可能です。フレックスボックスについての概要は flex を参照してください。

使用例

.flexbox {
  display: flex;
  display: -ms-flexbox;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  min-width: 100px;
  text-align: center;
}
.boxA {
  -webkit-flex-order: 3;
      -ms-flex-order: 3;
               order: 3;
  background-color: #fcc;
}
.boxB {
  -webkit-flex-order: 1;
      -ms-flex-order: 1;
               order: 1;
  background-color: #cfc;
}
.boxC {
  -webkit-flex-order: 2;
      -ms-flex-order: 2;
               order: 2;
  background-color: #ccf;
}

<div class="flexbox">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク

• http://www.w3.org/TR/css-flexbox-1/#order-property
• https://developer.mozilla.org/ja/docs/Web/CSS/order
• http://caniuse.com/#feat=flexbox

---