FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え（動画あり）

flexアイテムの順番の入れ替えについて解説します。

flex アイテムに対するプロパティの使い方動画
1. orderで並び変えたflexBoxレイアウト作成手順
FlexBoxレイアウトの並び方向の変更
1. flexのフロー方向〜flex-directionプロパティ
Web動画記事一覧

flex アイテムに対するプロパティの使い方動画

flexBoxレイアウトの初期状態

flexBoxレイアウトをorderプロパティで並べ順を変えた状態

HTMLコード

<div class="content">
<div class="column">   
  <p><img src="images/flower.jpg" ></p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="column">   
  <p><img src="images/green.jpg" ></p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="column">   
  <p><img src="images/ajisai.jpg" ></p>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

orderで並び変えたCSSコード

.column{
  padding: 10px;
  border:1px solid #333;
  margin-right: 20px;
}
.content{
  width:100%;
  margin: auto;
  display:flex;
  justify-content: space-between;
}
.column:first-child{
  order:2;
}
.column:nth-child(2){
  order:3;
}
.column:last-child{
   order:1;
}

orderで並び変えたflexBoxレイアウト作成手順

flexコンテナを作るための要素にdisplay:flexを設定
flexアイテムにあたる要素にorderプロパティを設定
orderプロパティに整数の値を設定する。数値が多きいほど右に並ぶ

＊注意：orderを指定してない場合、初期値は「0」です。従ってorderを指定してない要素より前に表示するには必ずマイナスの値を指定しなければなりません。最初戸惑うことがあると思いますので注意してください。

プロパティの名前 order

値
初期値 0
適用対象 flex アイテム , および flex コンテナの子であって絶対位置にされているもの
継承されない
媒体 visual
算出値指定値
アニメーション可

FlexBoxレイアウトの並び方向の変更

横並びの場合は初期状態で左から右に向かって並びます。
また、縦並びの場合は初期状態で上から下へ向かって並びます。

横向き、縦向きの並ぶ方向を逆にするにはflex-directionプロパティを使います。
横向きなら row-reverse 縦向きなら column-reverse を使用します。

flexのフロー方向〜flex-directionプロパティ

プロパティの名前 flex-direction

値 row | row-reverse | column | column-reverse
初期値 row
適用対象 flex コンテナ
継承されない
媒体 visual
算出値指定値

flex-direction のサンプル

flex-direction プロパティは、flexコンテナの向きを決めるものです。右方向横に並べるか、左方向横にならべるか、上から下に並べるか、下から上に並べるかなどを決めます。

row: flex コンテナの方向は、通常は左から右方向。ちょうど、全ての子要素にfloat:leftを設定したような挙動になります。
row-reverse: 右端から左方向に子要素がHTMLの書き順で並びます。全ての子要素にfloat:rightを設定したような挙動になります。
column: 通常フローと同じ方位になります。子要素はHTMLの書き順で、上から下に配置され、通常フローと同じような配置になります。
column-reverse: フローの方向が入れ換わります。つまり、子要素はHTMLの書き順で、下から上に配置されます。
＊＊注意：-reverse 付きの値は、ボックスの順序を全て逆順にするものではなく、それらはフローの方向のみを変化させるものです。塗り, 読み上げ, 逐次的ナビゲーションの順序は影響されません。