Written by Kasumi

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で最後の横並び要素だけ中央に寄せる方法について紹介しました。

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

目次

関連記事

HTMLCSS

【画像卒業】CSSだけで平行四辺形を作る方法

2022.07.05
4322
HTMLCSS

position: sticky;で要素が追従しない時の原因・対処方法

2022.10.06
1695
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1287
HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
698