• HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

flexboxを使って2・3カラム数で折り返しされる横並びレイアウトを実装。

justify-content: space-betweenで要素の間隔を均等に開けている。

折り返しされた最後の要素が一つしかない場合は、その要素を中央寄せにしたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
justify-content: space-betweenで最後の要素だけ中央に寄せる方法 by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

最後の折り返しされた要素がjustify-content: space-betweenを使ってると左寄せになりますが、中央に配置されてます。

実装手順は以下の通りです。

最後の折り返し要素を中央寄せにするCSSコード

/* 親要素 */
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

/* 子要素 */
.item {
  flex: 0 0 31%;/* 3カラム */
  width: 100px;/* 横並び要素の横幅 */
  height: 100px;/* 横並び要素の高さ */
}

/* 最後の要素だけ中央寄せ */
.item:last-child {
  flex: 0 0 100%;
  margin: auto;
}

最後の横並び要素だけ中央に配置するコード例です。

まず前提として横並び折り返しを実現するには以下プロパティを親要素・横並び要素に指定します。

親要素

display: flex;
flex-flow: row wrap;
justify-content: space-between;

横並び要素

flex: 0 0 1行に表示するカラム数をパーセント指定;
width: 要素の横幅;
height: 要素の高さ;

上記で折り返しの横並び要素を実現できました。

次に疑似要素の:last-childを使って最後の要素だけに以下プロパティを指定します。

.item:last-child {
flex: 0 0 100%;
margin: auto;
}

最後の要素だけ中央配置されます。

以上で実装完了です。

まとめ

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法について紹介しました。

以上で解説を終わります。