「flex-box」を使った レスポンシブで『複数行5カラム→3カラム→2カラム』的なレイアウトをしたい時のベストプラクティス?

6901 ワード
flexbox CSS3 CSS3 テキストリンク

タイトルのとおりですが、「flex-box」を使って単純な複数行のレイアウトを組む場合、
いくつかの方法があります。

justify-content を使って最後の行だけ左寄せにしたりっていう記事も見かけますが、そこまでするならもうflex-box使わなくていいんじゃ…って疑問に思います(場合によっては必要かと思いますが)、

display:gird に関してもベンダーつければ使えるようにはなりましたけど、
autoprefixerもちょっとまだあれですし、そもそも単発ではちょっと扱いづらい感じもあります。
なので小さな枠で使うのにはやはりflex-boxがfloatに変わる一番手軽で使いやすい方法だと思います。

開始早々話がそれましたが、
実際どうするのが一番シンプルでわかりやすいのか考えた結果こうなりました。

html
<ul class="flex-container">
  <li>HTML</li>
  <li>CSS</li>
  <li>Ruby on Rails</li>
  <li>javascript</li>
  <li>PHP</li>
  <!-- 以下 省略 -->
</ul>
scss
.flex-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1%;
  li{

    margin: 0 1% 10px;

    @media screen and (min-width:901px) {
      width: calc(19% - 1%);
    }
    @media screen and (min-width: 601px) and (max-width: 900px) {
      width: calc(32.33333333% - 1%);
    }
    @media screen and (max-width:600px) {
      width: calc(49% - 1%);
    }

  }
}



※一応SASSを使っていない方もいるとおもうので、CSS版も追記

css
.flex-container{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1%;
}
.flex-container li{
  margin: 0 1% 10px;
}

@media screen and (min-width:901px) {
  .flex-container li{
    width: calc(19% - 1%);
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .flex-container li{
    width: calc(32.33333333% - 1%);
  }
}
@media screen and (max-width:600px) {
  .flex-container li{
    width: calc(49% - 1%);
  }
}

これが一番ベストかなーとは思うんですが、他にいい方法があればご助言ください。