FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え(動画あり)

HTML&CSS

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

スポンサーリンク

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

flexBoxレイアウトの初期状態
flex-img11

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

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レイアウト作成手順

  1. flexコンテナを作るための要素にdisplay:flexを設定
  2. flexアイテムにあたる要素にorderプロパティを設定
  3. 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 付きの値は、ボックスの順序を全て逆順にするものではなく、それらはフローの方向のみを変化させるものです。 塗り, 読み上げ, 逐次的ナビゲーションの順序は影響されません。
順番を入れ替えるにはorderを使う。
「わしは、王(order)だ!
言うとおりに並びなさい」
こうやって覚えればよいのさ。。
dog_order
グルグル、グルグル!DogRoboはブリキ製のおそまつな作りのため、正確にワンワンと発音できません。グルグルの鳴き声は上機嫌な証拠と考えてよさそうです。

Web動画記事一覧

タイトルとURLをコピーしました