技術と雑記ブログ

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

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