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);
      }
    }

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