2021.01.03最終更新日：2023.09.18

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

【justify-content:space-between】折り返し両端に配置される問題をJavaScriptで解決！

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

以前、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を使っても折り返し行を左揃えにできます！」

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

1 cssで空の要素を作る
2 JavaScriptで空の要素を追加する
3 全体的な解説
4 １行に並ぶ要素の数を増やしてみる
5 まとめ

cssで空の要素を作る

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

<div id="content">
  <div class="inner">
    <div class="flex-space-between-js js-flex">
      <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-flexというクラスです。こちらをトリガーに、後ほどjsで整えていきます。

次にcssです。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

.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.empty {
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

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

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

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

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

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

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

JavaScriptで空の要素を追加する

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

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

  for (let i = 0; i < 3; i++) {
    $flex.append(empty);
  }
});

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

デモを表示

解説します。

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

次に、for (let i = 0; i < 3; i++)は、「３回〇〇を繰り返す」という意味です。

〇〇は何か？

$grid.append(empty);です。

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

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

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

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

※Chromeの場合

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

3個というのは、.js-flexの子要素の数です。１行に並ぶことができる最大数を指定しておけば問題ありません。

全体的な解説

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

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

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

これは、見えないけど最後の要素の隣に3個<div class=”flex-child-js 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.empty {
  height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
}

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

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

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

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

<div id="content">
  <div class="inner">
    <div class="flex-space-between-js js-flex5">
      <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>

/*１行が５つ並びの場合*/

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

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

$(function() {
  var $flex = $('.js-flex5'),
      empty5 = '<div class="flex-child-5 empty"></div>';

  for (let i = 0; i < 5; i++) {
    $flex.append(empty5);
  }
});

デモを表示

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