2018-03-20

左右均等配置にした Flexbox の最終行を左寄せにする

タイトルだけで説明するのが難しい…。以下のような記事と同じことをしたい。

HTML 構造はこんな感じ。

<ul class="parent">
  <li class="child">List 1</li>
  <li class="child">List 2</li>
  <li class="child">List 3</li>
  <li class="child">List 4</li>
  <li class="child">List 5</li>
  <li class="child">List 6</li>
  <li class="child">List 7</li>
  <li class="child">List 8</li>
</ul>

で、CSS で以下のように指定。

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child {
  width: 30%;
  /* あとは border とかでスタイリングする感じ */
}

.child の幅が 30% なので、1行あたり3列の3カラム構成になり、justify-content: space-between によって両端揃え・均等割付になるようにしてある。

この時、「List 7」は3行目の左端に配置されるが、「List 8」が3行目の右端に配置されてしまう。だが、本当は2行目の2列目、「List 5」の真下に「List 8」を配置したい。というのが今回の問題。

解決策

この解決策は、.child と同様の幅を持つ「空の要素」を配置するというもの。

今回の場合であれば、「List 9」に相当するような空の要素をデッチ上げて配置しておいてやれば、3列×3行、9要素ピッタリで、9つ目の要素が見えないのだから「左揃え」に見えるでしょ？というワケだ。

子要素の個数が決まっている場合は、擬似要素を代わりにブチ込んでやることも可能だ。しかし、今回は数が決まっていない、というか、実際は .child の幅が固定幅で、ウィンドウ幅に合わせて1行あたりの個数が変わるような作りになっていた。

そこで、JavaScript を併用して空の子要素をブチ込む、という方法がよく紹介されている。1行あたりのカラム数が変わる場合、原理的には元々の子要素と同じ数だけ空の要素を用意しておけば対応できる。

今回は JavaScript を組み込むのが面倒臭かったので、空の要素を HTML 中に書いておくことにした。

<ul class="parent">
  <li class="child">List 1</li>
  <li class="child">List 2</li>
  <li class="child">List 3</li>
  <li class="child">List 4</li>
  <li class="child">List 5</li>
  <li class="child">List 6</li>
  <li class="child">List 7</li>
  <li class="child">List 8</li>
  <!-- 以下を追加 -->
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
</ul>

で、CSS で以下のように指定。

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child {
  width: 30%;
  /* あとは border とかでスタイリングする感じ */
}

/* ココマデ変更なし */

/* 空の要素用のスタイル */
.empty {
  width: 30%;
  height: 0;
}

こうして作ったのが Bootstrap3 Glyphicons のデモページ。

Bootstrap3 Glyphicons

よかったらドウゾ。