横並びやタイル形式のデザインで列数によって、横や縦のmarginが異なることが多々あります。その度にcssを追加して書くのが面倒だったので、data属性のみでmarginを変更できるようにしました。

次のような特長があります。

• レスポンシブ対応で、window幅によってmarginを変更できる
• bootstrapのGridのようにclassで列数を変更できる

制作物

試しに制作した次のSample1,Sample2を比較してみてください。
どちらもcss(scss)とjavascriptは全く同じコードですが、上下左右のmarginが違います。

Sample1

See the Pen flexbox by takblog (@blanks-site) on CodePen.

Sample2

See the Pen flexbox by takblog (@blanks-site) on CodePen.

2つのSampleの違いは<div class="flexbox">のdata属性のみです。

data属性の値を読み込んで、上下左右のmarginを調整しています。

使用方法

必須ファイル

使用するときは下記のcss（もしくはscss）とjavascriptを読み込んでください。

ポップアップすると「コードをクリップボードにコピー」ボタンがあります。

scssコードをポップアップ

cssコードをポップアップ

javascriptコードをポップアップ

htmlテンプレート

htmlは次の基本的なテンプレートです。

下記のものは600px未満で1カラム、900px未満で2カラム、900px以上で3カラムになります。

<div class="flexbox">
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM1</div>
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM2</div>
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM3</div>
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM4</div>
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM5</div>
  <div class="flexitem--1/1 flexitem--1/2--sm flexitem--1/3--lg">ITEM6</div>
</div>

flexitemのブレークポイントと対応する接尾語

次のように適用されるように設定しています。（N,Mは1〜12までの整数）

• <div class="flexitem--N/M">…全てのwindow幅
• <div class="flexitem--N/M--xs">…450px以上
• <div class="flexitem--N/M--sm">…600px以上
• <div class="flexitem--N/M--md">…750px以上
• <div class="flexitem--N/M--lg">…900px以上
• <div class="flexitem--N/M--xl">…1024px以上

flexitemのmarginの設定

javascriptコードをポップアップ

flexitem同士のmarginはflexbox要素にdata属性を書かなければ、javascriptのコードの「mediaQueryData(※1)」（4〜34行目）を参考にmarginが設定されます。
※1「javascriptコードをポップアップ」内のコード参照

gutterは左右のmargin、spaceは上下のmarginの設定になります。

mediaQueryDataに書かれている通りにflexitem同士がmarginを取ると次のようになります。

• window < 450…flexitemの上下左右 2px
• 450 ≦ window < 600…flexitemの上下左右 5px
• 600 ≦ window < 750…flexitemの上下左右 10px
• 750 ≦ window < 900…flexitemの上下左右 15px
• 900 ≦ window < 1024…flexitemの上下左右 20px
• 1024 ≦ window …flexitemの上下左右 30px

flexboxのdata属性の書き方（flexitemのmarginの個別設定）

上記で設定したmarginとは個別でmarginを変えたい場合があります。
そのときはflexbox要素にdata属性で記述することでmarginを変更することができます。

例えば900px以上の上下左右のmarginは15pxにしたいときは、次のようにflexbox要素にdata属性を記述します。
※わかりやすく改行しています。

<div class="flexbox"
     data-lg-gutter="15"
     data-lg-space="15"
     data-xl-gutter="15"
     data-xl-space="15">

使用するときの注意点

次の2点に注意して使ってください。

• <div class="flexbox">にmarginの設定をしない。
• <div class="flexitem">にpaddingの設定をしない。

上記を注意して使ってもらえば使える場面は結構多く、コーディングも楽になると思います。

コードを編集するとき

案件によってブレークポイントが違ったり、サンプルのように細かくmarginを変える必要がなかったりする場合もあると思います。

その時にどこを編集・削除すればいいのかを説明します。

コードの何行目を〜と説明するので、ポップアップで見ながら参考にしてください。

scssコードをポップアップ

javascriptコードをポップアップ

margin調整のブレークポイントを変更する

javascriptの4〜34行目のmediaQueryDataの中身を変更します。

例えば「〜599px（base）」「600px〜1024px（tablet）」「1025px〜（pc）」のブレークポイントに変更したいときには、mediaQueryDataを次のようにします。

const mediaQueryData = {
  'pc':{
    'breakpoint':1025,
    'gutter':30,
    'space':30
  },
  'tablet':{
    'breakpoint':600,
    'gutter':20,
    'space':20
  },
  'base':{
    'gutter':10,
    'space':10
  }
};

このとき<div class="flexbox">に付けるdata属性が「data-tablet-gutter」「data-tablet-space」「data-pc-gutter」「data-pc-space」のように変わります。

列数のブレークポイントを変更する

scssの2〜9行目の$mediaBreakpointsの中身を変更します。

例えば「〜599px（base）」「600px〜1024px（tablet）」「1025px〜（pc）」のブレークポイントに変更したいときには、$mediaBreakpointsを次のようにします。

$mediaBreakpoints:(
  'base':1px,
  'tablet':600px,
  'pc':1025px
);

このとき<div class="flexitem">のclassは<div class="flexitem--1/2--tablet">,<div class="flexitem--1/2--pc">といった感じで変わります。