Sass(SCSS)で要素を均等幅横並びにする方法

均等割りはflexboxを使うのが一般的ですが、要素の左右上下の余白などの調整が少々面倒ですよね? そんな設定を簡単にやってくれるmixinを作成しました! まずは下記のデモを御覧ください。

Sass(SCSS)で要素を均等幅横並びにする方法

mixinを作成

@mixin col($col: 3, $marginRight: 15, $marginTop: 10, $parent: ""){
    width: calc((100% - #{$marginRight * $col +px} * (#{$col} - #{$col - 1})) / #{$col} - 0.1px);
    margin-right: #{$marginRight / 2 +px};
    margin-left: #{$marginRight / 2 +px};
    margin-bottom: #{$marginTop+px};
    @at-root #{$parent} {
        margin-right: -#{$marginRight / 2 +px};
        margin-left: -#{$marginRight / 2 +px};
        margin-bottom: -#{$marginTop+px};
    }
}

作成したらimportしてください
以下読み込み例
@import "foundation/mixin/col";

使用方法

以下のようなhtmlを準備します。

<ul class="items">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

scssの記述は以下のようになります。
親要素に
display: flex;
flex-wrap: wrap;
は必須です。

小要素で
@include col();でmixinを呼び出します。

.items {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 130px;
    background: blue;
    @include col(3, 20, 40, ".items");
    //@include col(カラム数, 右マージン, 2行目以降の上マージン, 親要素のclassまたはid);
  }
}

引数の値を変えるだけで余白やカラム数を簡単に変更できます!
以上!