2列の要素の最後が奇数のとき横幅いっぱいにボックスを伸ばす方法

この記事の結論

• nth-child(2n+1):last-child を指定してあげることで解決

2列ある表などで、最後の要素が奇数か偶数か分からないときの対処法は？

結論、nth-child(2n+1):last-childを指定し、width: 100%;を加えるだけです。
これで、偶数の場合は通常通りの表示になり、奇数の場合は最後の要素が横幅いっぱいで表示されます。

具体的な解説

まずは偶数列の例をご覧ください。

<ul class="ex_list">
    <li>北海道</li>
    <li>東京都</li>
    <li>大阪府</li>
    <li>福岡県</li>
</ul>

.ex_list {
	display: flex; /* 要素を横並びにする */
	flex-wrap: wrap; /* 要素を折り返す */
}
.ex_list li {
	width: 50%;
	padding: 10px;
	background-color: #127bce;
	color: #fff;
	text-align: center;
	border: solid 2px #fff;
}

表示結果

北海道

東京都

大阪府

福岡県

よくあるレイアウトかと思います。

ただこの要素に「沖縄県を加えてください。最後の行は横幅いっぱいにしてください。」と言われたらどうでしょう？
とりあえず、そのまま要素を増やしただけの場合は以下みたいな感じになりますね。

<ul class="ex_list">
<li>北海道</li>
<li>東京都</li>
<li>大阪府</li>
<li>福岡県</li>
<li>沖縄県</li>
</ul>

表示結果

北海道

東京都

大阪府

福岡県

沖縄県

これだと最後の要素がwidth: 50%;で表示されてしまっているわけですから、要望通りではないですね。
ここで考えられるのが、最後の要素(:last-childを指定)にwidth: 100%;にすればいいのではないか？ということです。
とりあえず指定してみましょう。

<ul class="ex_list">
    <li>北海道</li>
    <li>東京都</li>
    <li>大阪府</li>
    <li>福岡県</li>
	<li>沖縄県</li>
</ul>

.ex_list {
	display: flex; /* 要素を横並びにする */
	flex-wrap: wrap; /* 要素を折り返す */
}
.ex_list li {
	width: 50%;
	padding: 10px;
	background-color: #127bce;
	color: #fff;
	text-align: center;
	border: solid 2px #fff;
}
.ex_list li:last-child {
	width: 100%;
}

表示結果

北海道

東京都

大阪府

福岡県

沖縄県

要望通りの表示になりましたね！！
ただこれだと、要素が偶数に戻った場合にどうなるか！？

表示結果

北海道

東京都

大阪府

福岡県

こんな感じで崩れてしまいますね。

長々と例を出しましたが、つまり解決したいこととしては、

「2列の要素で奇数か偶数か分からないときに、どちらでもいい感じに表示してくれるにはどうすればいいか！？」

ということで、冒頭の結論にあるnth-child(2n+1):last-childを指定してみましょう。

.ex_list {
	display: flex; /* 要素を横並びにする */
	flex-wrap: wrap; /* 要素を折り返す */
}
.ex_list li {
	width: 50%;
	padding: 10px;
	background-color: #127bce;
	color: #fff;
	text-align: center;
	border: solid 2px #fff;
}
.ex_list li:nth-child(2n+1):last-child {
	width: 100%;
}

表示結果(奇数)

北海道

東京都

大阪府

福岡県

沖縄県

表示結果(偶数)

北海道

東京都

大阪府

福岡県

沖縄県

広島県

どちらも綺麗に表示することができました。

なぜこうなるのか？

最後に、「なぜこうなるのか？」の部分を簡単に解説します。

:nth-child(2n+1):last-childを分解してみると、
:nth-child(2n+1)と:last-childですね。

:nth-child(2n+1)の「2n+1」というのは奇数を表すので、文章としてまとめると、

「奇数番目の最後の要素のみにcssを当てます」という意味になります。
だから、偶数番目の最後に関しては影響が出ないわけですね。

なるほど～って感じですよね。なかなか自力で思いつくのは難しいかと思います。

cssのこういうちょっとしたテクニックを覚えておくだけで表現の幅が広がったり、動的な要素に柔軟に対応できるようになるので、
少しずつ自分のストックとして貯めておくのが良いですね！

参考になれば幸いです！