2019年11月01日

flexboxのspace-betweenで最終段を綺麗に出力する方法

お世話になっております。佐藤です。

今回は横並びにする際に便利なプロパティである「space-between」に関して紹介していこうと思います。

基本的な使い方

HTML

<ul>
  <li><img src="img/img5.png" alt=""></li>
  <li><img src="img/img6.jpeg" alt=""></li>
  <li><img src="img/img7.jpg" alt=""></li>
</ul>

CSS

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list li {
  width: 31%;
  margin-bottom: 15px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}
space-betweenを指定した際の画像

静的なサイトであれば問題ないのですが、WordPressやシステムで動的にコンテンツを吐き出すものであれば以下のようになる場合があります。

space-betweenを指定した際に最後の段だけ思い通りにいかない例

理想的には以下のようになって欲しいのではないでしょうか?

理想例

対応方法としては2つあります。

方法1

直接HTMLのコードにに空のli(要素)を付け加える

HTML

<ul id="list" class="list">
  <li><img src="img/chara1.png" alt=""></li>
  <li><img src="img/chara2.png" alt=""></li>
  <li><img src="img/chara3.png" alt=""></li>
  <li><img src="img/chara1.png" alt=""></li>
  <li><img src="img/chara2.png" alt=""></li>
  <li class="none"></li>
  <li class="none"></li>
</ul>

CSS

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list li {
  width: 31%;
  margin-bottom: 15px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}
/* 追加CSS */
.list li.none {
  width: 31%;
  margin-bottom: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

デザインによって、1つ追加するのか、複数追加するのかを考えるだけで良いので簡単です。3列なら2つ、4列なら3つのように空の追加しておけばOKです!

方法2

JavaScriptで操作して、空のli(要素)を追加する方法です。

HTMLとCSSは同じ

JavaScript

let item = "";
// 追加する要素の数は調整して下さい。
for (let i = 0; i < 3; i++) {
  item += '<li class="none"></li>';
}
$("#list").append(item);

こんな感じで空の要素を追加し、空の要素のhightやmarginなどを0にしておくことで綺麗に出力することが出来ます。

無駄なコードを書くことはアクセシビリティ的には正直ベストとは言えませんが、対応方法としてはこれが現状最善かなと考えております。もし、もっと良い方法がありましたらご教授頂けると幸いです。

以上、space-betweenの使い方についてでした。