【Flexbox】HTMLの記述を変えずに表示順を変えるCSS

コンテンツの順序を変えたい。
設計からデザイン・コーディングを終えた段階でよくある要望である。
似たようなコンテンツの順番差し替えなら何一つ悩むことはないのだが困るのは以下の場合。

• RWDにおいてPCの時とスマホの時のコンテンツの並び順を変えたい
• sectionやboxをまたいだ形での変更

コンテンツ内での変更ならpositionを使用することで対応できるが、
スマホビューでのコンテンツ順の変更はpositionでは心もとない。

よくあるのは、PCビューでサイドに設定しているナビゲーションを、スマホビューではメインコンテンツの上に持ってきたいという希望。

htmlを「サイドナビ」→「メインコンテンツ」の順に記述すれば解決するが、「メインコンテンツ」を先に記述するべきという思想は根強く、かといってPC用とスマホ用のナビゲーションを別個に記述するのもださい。

そこで今回はhtmlの記述順を変更することなく、コンテンツの順序を変更する方法を調べてみた。

CSS3のFlexboxを使う

今回はCSS3のFlexboxを使用。
Flexboxは多くの要素が設定されており、従来CSSの組み合わせやJavascriptに依存していたようなレイアウトも、少ない記述で比較的直観的に設定することができる。
大まかには

• コンテンツの配置方向　「上→下」「下→上」「左→右」「右→左」
• コンテンツの折り返し
• コンテンツ配置の揃え方　上下左右揃え、均等、中央揃えなど
• コンテンツの伸縮
• コンテンツの表示順番

などなど、昨今のRWDの流行に対応できるレイアウトを実現できる。
今回はコンテンツの表示順番を変更するプロパティを使用します。

コンテンツの順番を入れ替える

【html】

今回の例としては下記の一般的なレイアウトの場合。

HTMLの記述順としは①から④の順番となり、<main>と<aside>を内包した<article>が記述されている。
スマホビューの際には③の<aside>が②の<main>の上に来る設定。

【CSS】

Flexboxを使用するには、FlexboxコンテナーとFlexboxアイテムが必要。

• Flexboxコンテナー・・・適用する要素を内包する要素。今回の例では<article>が該当。
• Flexboxアイテム・・・Flexboxコンテナーの子要素。今回の例では<main>、<aside>が該当。

　　　　　　　　　

PCビューのCSSは通常通り。
スマホビューのCSSにflexboxを設定する。
なお、ブラウザによっては非対応またはベンダープレフィックスが必要なため要注意。

解説

display:flex;

まず<main>と<aside>を包括する<article>をFlexコンテナ―に設定。
これで<article>の子要素をFlexアイテムとして設定することができる。

flex-direction:column;

Flexコンテナー内のFlexアイテムの並びを設定する。
ちなみに初期値は「row」であるため、設定しないとコンテンツが横並びになってしまう。

order:1;

コンテンツの並ぶ順番を設定。
初期値は「order:0;」である。
つまりFlexコンテナー内のFlexアイテムにはデフォルトで「order:0;」が指定されている。
<main>に「order:1;」を指定することで<aside>よりも記述順が後になる。

今回の記事でよかったこと

• HTMLの記述順を変えずにコンテンツの表示順を変えることができた。
• 複雑なCSSや冗長なHTMLを必要としない。

懸念点

• ブラウザの対応状況
• ブラウザやバージョンによるベンダープレフィックスの有無が難しい。
• ブラウザごとによって表示の差異があるか否か？

 - CSS野郎