SASS: Flexbox card layout, also supporting old browser(~android 4.3, IE9)

_component-card-items.scss

// CARD ITEMS
// flexbox対応が不完全なブラウザ(~Android 4.3)向けにfloatで対処
// largeの時のカラム数は3,4,5に対応
////////////////////////////////////
$card-items-classname: "card-items" !default;
$card-items-children-classname: "item" !default;
$card-items-flex-align-items: stretch !default;
$card-items-flex-justify-content: flex-start !default;
$card-items-flex-wrap: wrap !default;

$card-items-block-grid-spacing-small: 16px !default;
$card-items-block-grid-spacing-medium: 32px !default;
$card-items-block-grid-spacing-large: 48px !default;

$card-items-item-margin-bottom: 40px !default;
$card-items-font-color: #444 !default;
$card-items-font-size: 1rem !default;

@mixin component-card-items {
  .#{$card-items-classname} {
    margin: 0 (- + $card-items-block-grid-spacing-large / 2);
    //Modernizrのflexbox判定を利用。flexbox対応の殆どのブラウザでは、以下に記述するfloatとclearの指定は無視される
    .flexbox & {
      @include display(flex);
      @include align-items($card-items-flex-align-items);
      @include justify-content($card-items-flex-justify-content);
      @include flex-wrap($card-items-flex-wrap);
    }
    .#{$card-items-children-classname} {
      position: relative;
      float: left;
      margin-bottom: $card-items-item-margin-bottom;
      padding: 0 $card-items-block-grid-spacing-large / 2;
      list-style-type: none;
    }
    // smallの場合は、mediumとlargeのカラム数指定に関わらず横2カラムで統一する
    @include breakpoint(small only) {
      margin: 0 (- + $card-items-block-grid-spacing-small / 2);
      .#{$card-items-children-classname} {
        width: 49.9999%;
        padding: 0 ($card-items-block-grid-spacing-small / 2);
        // 横2つ並びの為3つ目でclear
        &:nth-child(2n-1) {
          clear: left;
        }
      }
      &.#{$card-items-classname}-5 .#{$card-items-children-classname},
      &.#{$card-items-classname}-4 .#{$card-items-children-classname},
      &.#{$card-items-classname}-3 .#{$card-items-children-classname} {
        width: 49.9999%;
      }
    }
    // mediumの場合は、largeの時のカラム数から-1した数値にする
    @include breakpoint(medium only) {
      margin: 0 (- + $card-items-block-grid-spacing-medium / 2);
      .#{$card-items-children-classname} {
        width: 33.3332%;
        padding: 0 ($card-items-block-grid-spacing-medium / 2);
      }
      &.#{$card-items-classname}-5 .#{$card-items-children-classname} {
        width: 24.9999%;
        // 横4つ並びの為5つ目でclear
        &:nth-child(4n-3) {
          clear: left;
        }
      }
      &.#{$card-items-classname}-4 .#{$card-items-children-classname} {
        width: 33.3332%;
        // 横3つ並びの為4つ目でclear
        &:nth-child(3n-2) {
          clear: left;
        }
      }
      &.#{$card-items-classname}-3 .#{$card-items-children-classname} {
        width: 49.9999%;
        // 横2つ並びの為3つ目でclear
        &:nth-child(2n-1) {
          clear: left;
        }
      }
    }
    @include breakpoint(large up) {
      &.#{$card-items-classname}-5 .#{$card-items-children-classname} {
        width: 19.9999%;
        // 横5つ並びの為6つ目でclear
        &:nth-child(5n-4) {
          clear: left;
        }
      }
      &.#{$card-items-classname}-4 .#{$card-items-children-classname} {
        width: 24.9999%;
        // 横4つ並びの為5つ目でclear
        &:nth-child(4n-3) {
          clear: left;
        }
      }
      &.#{$card-items-classname}-3 .#{$card-items-children-classname} {
        width: 33.3332%;
        // 横3つ並びの為4つ目でclear
        &:nth-child(3n-2) {
          clear: left;
        }
      }
    }
  }
}