display: Flexで可変するカラム数に対してJavaScriptでクラスを付与する

「display: flex」

レスポンシブ対応が当たり前な昨今のWeb制作では、便利すぎてもはや必須になってきていると言っても過言ではない flexbox ですが、1行ごとに異なるスタイルを当てたい時は案外面倒な事になりがちです。

例えば、以下のように横幅1000px以上の時は5カラム、800px〜999pxの時は4カラム、600px以下の時は3カラムという条件で1行ごとに違う色にしたい場合、CSSだけでレスポンシブ対応をしようとすると、

@media screen and (min-width: 1000px) {
  li:nth-child(n+1):nth-child(-n+5) {style;}
  li:nth-child(n+6):nth-child(-n+10) {style;}
  li:nth-child(n+11):nth-child(-n+15) {style;}
  :
  :
}
@media screen and (max-width: 999px) {
  li:nth-child(n+1):nth-child(-n+4) {style;}
  li:nth-child(n+5):nth-child(-n+8) {style;}
  li:nth-child(n+9):nth-child(-n+12) {style;}
  :
  :
}
@media screen and (max-width: 600px) {
  li:nth-child(n+1):nth-child(-n+3) {style;}
  li:nth-child(n+4):nth-child(-n+6) {style;}
  li:nth-child(n+7):nth-child(-n+9) {style;}
  :
  :
}

のようにしなければならないかと思います。

ただこの場合、アイテムの数が増えたり、そもそもアイテムの数が不明な場合はどこまで記述しておけば良いのかわかりません。なによりあまりキレイな記述とは言えない（あくまで個人の感想）です。

そこで、JavaScriptでカラム数に応じてクラスを付与しようと思います。

今回は、奇数行、偶数行に対してクラスを付与します。

HTML

とりあえずアイテム数を15個にしてみました。

<ul id="flexBox">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

奇数行のアイテムを赤色、偶数行のアイテムを青色にしてみます。

また、カラム数は2〜5を想定してます。

ul {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  width: 190px;
  height: 190px;
  margin: 0 0 10px 10px;
}
@media screen and (max-width:600px) {
  li {
    width: 48%;
    margin-left: 1.5%;
  }
}
.clmOdd {background-color: red;}
.clmEven {background-color: blue;}

JavaScript

読み込み時、画面サイズ変更時に実行されます。
変数でブレイクポイントを設定してます。

$(window).on('load resize',function(){
  var windowWidth = $(window).width();
  var breakPointPc  = 1020;
  var breakPointTb  = 820;
  var breakPointSp  = 610;
  var widthType = -1;
  if (windowWidth >= breakPointPc) {
    widthType = 5;
  }
  else if (windowWidth >= breakPointTb) {
    widthType = 4;
  }
  else if (windowWidth >= breakPointSp) {
    widthType = 3;
  }
  else {
    widthType = 2;
  }
  variableAddclass($('#flexBox'), widthType);
});

function variableAddclass(target, row_count) {
  var directionTo = 'oddRow';
  var box_count = target.find("li").length;
  var index = 0;
  for(var i=0; i<box_count; i++) {
    for(var j=0; j<row_count; j++) {
      var elem = target.find("li").get(index);
      index ++;
      $(elem).removeClass();

      if (directionTo == 'oddRow') {
        // 奇数のrowにクラス付与
        $(elem).addClass('clmOdd');
      } else {
        // 偶数のrowにクラス付与
        $(elem).addClass('clmEven');
      }
      if (box_count === index) {
        return false;
      }
    }

    if (directionTo == 'oddRow') {
      directionTo = 'clmEven';
    } else {
      directionTo = 'oddRow';
    }
  }
};