2列のリストで要素数が奇数の場合に最後の要素を100%表示にする

2列で並ぶリストで最後に1つ余った際に幅100%に広げたい場合、幅100%用のclassを別途付与するでも実装はできますが、今回は個数が変動する場合を想定して、classを付与しない形での実装を試してみます。

サンプルコード

まずは対応前の2列のリストを実装してみます。

<ul class="nav">
	<li class="nav_item">
		<a class="nav_link" href="">HTML</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">CSS</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">JavaScript</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">WordPress</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">Movable Type</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">PHP</a>
	</li>
	<li class="nav_item">
		<a class="nav_link" href="">Python</a>
	</li>
</ul>

.nav {
	display: flex;
	flex-wrap: wrap;
}
.nav_item {
	width: 50%;
}
.nav_link {
	display: block;
	padding: 10px;
	border-bottom: gray 1px solid;
}

余りがない場合は問題ないですが、最後の1つ余った時にも幅50%での表示になります。
対応前のデモページ

対応方法ですが、nth-child() と :last-child を使用します。

.nav {
	display: flex;
	flex-wrap: wrap;
}
.nav_item {
	width: 50%;
}
.nav_item:nth-child(odd):last-child {
	width: 100%;
}
.nav_link {
	display: block;
	padding: 10px;
	border-bottom: gray 1px solid;
}

:nth-child(odd) で奇数を対象とした上で、:last-child でさらにその中から最後の要素のみを対象としています。
余りがない場合は最後の要素が偶数になるので、上記の設定は適用されません。
対応後のデモページ

同じ仕組みを使えば、3列以上の場合も対応できます。

.nav {
	display: flex;
	flex-wrap: wrap;
}
.nav_item {
	width: 33.33333%;
}
/* 3列のリストで左の列が最後の場合 */
.nav_item:nth-child(3n + 1):last-child {
	width: 100%;
}
/* 3列のリストで中央の列が最後の場合 */
.nav_item:nth-child(3n + 1):nth-last-child(2) { /* 最後のひとつ前の要素 */
	width: 50%;
}
.nav_item:nth-child(3n + 2):last-child { /* 最後の要素 */
	width: 50%;
}
.nav_link {
	display: block;
	padding: 10px;
	border-bottom: gray 1px solid;
}

8〜11行目が余り1つの場合、12〜18行目が余り2つの場合になります。
余りが1つの場合は:nth-child(3n + 1) で左の列を対象とした上で、:last-child でさらにその中から最後の要素のみに幅100%を設定しています。
余りが2つの場合は:nth-child(3n + 1) と :nth-last-child(2) で左の列で最後から2番目の要素、:nth-child(3n + 2) と :last-child で中央の列で最後の要素に対して幅50%の設定になります。
3列の場合のデモページ