Flexboxでのレスポンシブ対応

「Flexboxがfloatの代わりに使えることがわかったが、floatの場合のようにレスポンシブなレイアウト対応ができるのか?」という声をしばしば耳にします。Flexboxでのレスポンシブなレイアウト例を見てみましょう。

デバイス幅が500px以下のとき、ヘッダー部分を縦並び、カード部分を2カラムする例です。

160822_flexbox_responsive

2カラムのカードレイアウトは、ボックスの幅を変えることで実現します。

@media (max-width: 500px) {
  main div.animal {
    width: calc(50% - 10px);
    margin: 5px;
  }
}

問題はヘッダー部分の縦並びです。

ボックスの並び方向を変更する

Flexboxでは、初期設定の場合ボックスは横方向に並びます。並び方向を変更するには、flex-directionプロパティを用います。flex-directionにより、主軸と交差軸の方向が替わります。

160822_flexbox_direction

今回は、縦並びを設定するので、columnを指定します。そして、横方向の中央揃えを指定するために、交差軸方向の並び方設定であるalign-itemsプロパティにcenterを指定します

@media (max-width: 500px) {
  header {
    flex-direction: column;
    align-items: center;
  }
}

160822_flexbox_responsive_header

justify-contentalign-itemsは横方向、縦方向の並びを指定するのではなく、主軸と交差軸の位置によってボックスの並び方が変わること、そして主軸と交差軸の位置はflex-directionによって変更されうることに注意してください。

ここまでのCSSコードとデモは下記です。

最後のページでは、Flexboxのクロスブラウザ対応について解説します。