コピペでもOK!justify-content:space-betweenで折り返し行を左揃えに配置する方法!

  • このエントリーをはてなブックマークに追加
JavaScript使ったら」できたよ。コピペでもOKよ。

こんにちは。五平餅くんです。

以前、justify-contentを使うと、最後に折り返した行の要素両端に配置されちゃう問題について解説しました。

↓こちらの記事です。

justify-content:space-betweenの折り返しで両端にいってしまう五平餅くん
justify-content:space-betweenで折り返し時に両端に配置されちゃう問題
こんにちは。五平餅くんです。 justify-contentはflexboxの便利なcssプロパティですよね。 しかし、便利だといって毎回使いまくると、WordPressのテーマ作成時に穴にハマることがあります。 今回は、時に応じて使い分けるべしというお話です(反省の意味もこめて)。 justify...

ここでは、justify-content:space-betweenでは、この問題を解決できないと結論付け、普通のflex +paddingを使うことで解決できるといってまとめました。

ここで、訂正させてください。

「JavaScriptを使えば、justify-content:space-betweenを使っても折り返し行を左揃えにできます!」

それでは解説していきます。

cssで空の要素を作る

まずは、HTMLでベースを作っていきます。

<div id="content">
  <div class="inner">
    <div class="flex-space-between-js js-grid">
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
    </div>
  </div>
</div>

ポイントは、js-gridというクラスです。こちらをトリガーに、後ほどjsで整えていきます。

次にcssです。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.inner {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  background: red;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

.title {
  font-size: 18px;
  text-align: center;
}

@media screen and (max-width: 500px) {
  .title {
    font-size: 12px;
  }
}

/*************************************:
jsでやる場合。
***************************************/
.flex-space-between-js {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-child-js {
  width: 31.5%;
  background: #f2f2f2;
  border: 1px solid #888;
  padding: 10px 0;
  margin-top: 15px;
}

/*空の要素*/
.flex-child-js.is-empty {
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

.flex-space-between-jsでjustify-content:space-betweenを指定しています。

.flex-child-jsは一つが31.5%の幅ですので、1行に3つ入ります。

100%(親要素.flex-space-between-jsの幅) – 31.5(子要素.flex-child-jsの幅) × 3つ分 = 5.5%

↑5.5%が2つめの要素の左右余白の合計になります。

そして、最も大事なのは.flex-child-js.is-empty。

こちらは後ほど解説します。

JavaScriptで空の要素を追加する

続いてJavaScriptです。(jQueryを使用しています。)

$(function() {
  var $grid = $('.js-grid'),
      emptyCells = '<div class="flex-child-js is-empty"></div>';
      $gridChild = $grid.find('.flex-child-js');

  for (let i = 0; i < $gridChild.length; i++) {
    $grid.append(emptyCells);
  }
});

HTML、CSS、JavaScriptを加えたデモはこちら↓

解説します。

まずはセレクタやHTMLを変数に定義していきます。

次に、for (let i = 0; i < $gridChild.length; i++)は、「子要素.flex-child-jsの数だけ〇〇を繰り返す」という意味です。

〇〇は何か?

$grid.append(emptyCells);です。

これは、「親要素.js-gridの子要素最後に、<div class=”flex-child-js is-empty”>を追加する」という意味です。

この一連の処理をまとめると、以下のようになります。

「子要素.flex-child-jsの数だけ、親要素.js-gridの子要素最後に、<div class=”flex-child-js is-empty”>を追加するのを繰り返す」

先程のデモのページで、右クリックし、「検証※」でコードをみていただくとこのように見えると思います。

※Chromeの場合

<div class="flex-child-js is-empty">が8個追加されている

<div class=”flex-child-js is-empty”>が8個追加されています。

8個というのは、.js-gridの子要素の数です。

全体的な解説

少し「?」だと思うのでもう少し解説します。

コピペでOKという方は飛ばしても構いません。

先程JSで、親要素.js-gridの子要素最後に、<div class=”flex-child-js is-empty”>をたくさん追加しました。

これは、見えないけど最後の要素の隣に8個<div class=”flex-child-js is-empty”>がある状態です。

見えないけど、最後の要素の右隣にたくさん空の要素がある図

先程のcssのこちらを注目ください。

/*************************************:
jsでやる場合。
***************************************/
.flex-space-between-js {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-child-js {
  width: 31.5%;
  background: #f2f2f2;
  border: 1px solid #888;
  padding: 10px 0;
  margin-top: 15px;
}

/*空の要素*/
.flex-child-js.is-empty {
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

.flex-child-js.is-emptyは高さが0なので、折り返しても全体の高さが大きくなることはありません。

1行に並ぶ要素の数を増やしてみる

これは結構便利で、1行に並ぶ要素の数を変えてみてもちゃんと折り返し行が左揃えになってくれます。

試しに、1行を5つ並びにしてみます。

<div id="content">
  <div class="inner">
    <div class="flex-space-between-js js-grid">
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
      <div class="flex-child-js">
        <div class="title">
          タイトル
        </div>
      </div>
    </div>
  </div>
</div>
/*1行が5つ並びの場合*/

.flex-child-js {
  width: 18%;
  background: #f2f2f2;
  border: 1px solid #888;
  padding: 10px 0;
  margin-top: 15px;
}

※.flex-child-jsのみ変更で、残りは先程のcssと全く同じです。

$(function() {
  var $grid = $('.js-grid'),
      emptyCells = '<div class="flex-child-js is-empty"></div>';
      $gridChild = $grid.find('.flex-child-js');

  for (let i = 0; i < $gridChild.length; i++) {
    $grid.append(emptyCells);
  }
});

こんな感じでスッキリです!

まとめ

今回は、justify-content:space-betweenの折り返しの弱点をJavaScriptで補ってみました。

レイアウトにいちいちJavaScriptを呼び出すのも面倒ですので、cssだけでやりたい場合はただのflex+paddingの方法を使うことをお勧めします!

HTMLをシンプルにするために、justify-content:space-betweenでやりたい方は今回の方法をお勧めします!

もしよかったら使ってみてください!

最後まで読んでいただき、ありがとうございました!

おまけ

JavaScriptの「for (let i = 0; i < $gridChild.length; i++)」で、子要素.flex-child-jsの数だけ空の要素を増やす処理をしましたが、これはfor (let i = 0; i < 10; i++)とかでもOKです。

1行に絶対並ばないであろう数字ならなんでもOKです。

(1とか2などの小さい数字だと、余白がおかしくなってしまう可能性があるので注意です。)

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。