きまぐれ引きこもりんご80%

Flexbox【第5回】ショートハンド、IE対応、レスポンシブ

web制作

【Flexbox】ショートハンド、IE対応、レスポンシブ

前回までで一通りのFlexboxプロパティの説明が終わったので、今回はショートハンドなどを紹介してFlexboxシリーズを終わりにしたいと思います。
それでは早速、Flexコンテナーのショートハンドflex-flowと、Flexアイテムのショートハンドflexをみてみましょう。

flex-flow

flex-flow: row nowrap;(初期値)

flex-directionflex-wrapの値をまとめて指定できます。

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap;
}

See the Pen flex-flow by ossan (@g3) on CodePen.

flex

flex: 0 1 auto;(初期値)

flex-growflex-shrinkflex-basisの値をまとめて指定できます。

.flex-item {
  flex: 0 0 50px;
}

See the Pen flex-sh by ossan (@g3) on CodePen.

Flexboxの対応ブラウザ

Can I useで調べると、今やFlexboxに対応していないモダンブラウザはないので安心して使えるのですが、やはりIEだけは難があります。

古いIEに対応

Flexboxに対応していない古いバージョンのIEでも、jsを用いることでFlexboxを実装することが可能で使い方もいたって簡単です。まずは、GitHubからダウンロードしてjsファイルを読み込むか、CDNから読み込みます。

flexibility.js

<script src="flexibility.js"></script>
<!-- CDNの場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/1.0.6/flexibility.js"></script>

あとは、Flexboxコンテナーのdisplay: flex;とは別に-js-display: flex;を追加するだけです。

.flex-container {
  -js-display: flex;
  display: flex;
}

IE11に関しては「Partial support」になっているので、flexibility.jsを使わなくても動作するのですが、いくつかバグがあるので注意が必要です。
その中でも比較的よく遭遇するバグが、上記でも紹介したflexアイテムのショートハンド。flex-basisの単位を省略すると効かなくなってしまうので、単位をつけるようにしましょう。

.flex-item {
  flex: 0 1 20%;
}

その他にも、バグや問題に遭遇しても検索すれば大体の解決方法は見つかりますので、その都度検索してみて下さい。
https://qiita.com/hashrock/items/189db03021b0f565ae27

レスポンシブ対応も簡単

レスポンシブもflex-wrapで折り返すだけで簡単に設定できます。

.flex-container {
  display: flex;
  flex-flow: row wrap;
}
.flex-item {
  flex: 0 0 300px;
}

See the Pen flex-responsive by ossan (@g3) on CodePen.

もちろん、メディアクエリを用いてflex-directionの値を切り替えるなどの方法もあります。

@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

今回でFlexboxシリーズは最後になります。
自分なりにアウトプットすることによって、Flexboxアイテムのプロパティなど理解を深めることが出来ました。もはや普通に使われているFlexbox。IE等のバグに気をつけながら、どんどん使っていこうと思います。