Flexboxでコンテンツを入れ替える

こんにちは、8月ももうすぐ終わり、宿題を溜め込んだ子どもたちには憂鬱な時期ですね。
混雑しない9月にしたり顔で夏休みを取ろうと企てているコーダーがお送りします。
技術メモです。

今回はCSS3のFlexboxについて少し紹介したいと思います。

Flexboxとは、要素のサイズが不明なものでも変化するものでも、柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。
複雑なレイアウトでも今までより少ないコードで、よりシンプルに実装することができます。
と、説明しても何のことだかいまひとつピンときませんよね。
沢山のプロパティが設定でき、様々なことができるFlexboxですが、その全てを紹介すると記事が恐ろしく長くなってしまいそうなので、今回は、コンテンツの並び替えをしてみたいと思います。

単純に並び替えが簡単になる他にも、例えばPCとスマホでコンテンツの並び順を替えたい時などにも使えるかと思います。

早速ですがデモをご覧ください。

上が何もスタイル指定しない通常のブロックコンテンツで

下がFlexboxを使って順番を入れ替えたものです。
2つともhtmlのソース上は下記のように同じ順番になっています。

■html

<div id="flex">
    <div class="blue">1つめのブロック</div>
    <div class="red">2つめのブロック</div>
    <div class="green">3つめのブロック</div>
</div>

これに対してcssでflexboxの指定を行います。

ベンダープレフィックスというブラウザごとの指定が必要になるので、少し冗長になりますが頑張って書きましょう。

■css

#flex {
    display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display:-webkit-flex;/*--- safari（PC）用 ---*/
    display:flex;

    -ms-flex-wrap:wrap;/*--- IE10用 ---*/
    -webkit-flex-wrap:wrap;/*--- safari（PC）用 ---*/
    flex-wrap:wrap;
}
#flex .blue {
    order: 3;
}
#flex .red {
    order: 1;
}
#flex .green {
    order: 2;
}

まずdisplay:flex;を指定しますが、flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることなので

これだけだと、レイアウトそのものが横並びに変わってしまいます。
そこで、その後にflex-wrap:wrap;というプロパティを指定しています。
これで横並びになっていたものが改行され、縦並びになります。

後はFlexboxの中のコンテンツそれぞれに振られたclassに対して

orderで順番を指定するだけでコンテンツの順番が簡単に替わりました。

CSS3の技術なので、IEは10からの対応になり、幅広いブラウザに対応しなければいけない場合は使用が難しいですが

スマホの時だけ順番を変えたいという時などはjavascript等を使うことなく変更ができますので、便利に使えるのではないかと思います。

以上、8月の技術メモでした。