条件に応じてwidthの幅の数字を変更したい。

Question

前提・実現したいこと

PHPでサイトを作成しています。

<li>の個数が条件により3個になったり、4個になったりする時に <li>のwidth指定をcalc(100%/3)にしたり calc(100%/4)にしたりするいい方法はないでしょうか。

条件みたいなもの

<li>はページにより、1〜6と変動する。

該当のソースコード

<nav>
<ul id="pagenav">
<!-- この<li></li>の数が1〜6の間で変動します -->
<li><a href="hogehoge.php">メニュー1</a></li>
<li><a href="hogehoge.php">メニュー2</a></li>
<li><a href="hogehoge.php">メニュー3</a></li>
</ul>
</nav>

css

#pagenav{
width: calc(100%/6);//←ここの数字を変動させたい cssで無理なのは理解してます。
}

Answer 1

flexで、均等配置する幅以上の同じサイズを、flexの小要素に指定すれば、同じ割合で配置されます。
100%と指定しておけば楽かと。

.pagenav {
	display: -webkit-flex;
	display: flex;
}
.pagenav li{
	width: 100%;
}

下記URLは、1~6のパターン見やすいようにちょっと調整しています。
https://codepen.io/sleepzzz/pen/KRELYq

Comments

[kszk311]

もしくはtable + table-cell…

Answer 2

Flexではどうなのですか？

ul {
  margin: 0;
  padding: 0;
}

#pagenav {
  display: flex;
  width: 100%;
}

li {
  flex-grow: 1;
}

Answer 3

実現方法

CSSのみで実現可能です。
親要素の大きさを変えるのではなく、子要素の大きさを1つ辺り決める事で解決します。

nth-child()などはとても便利なので良く調べる事を勧めます。

HTML

	<nav>
		<ul id="pagenav">
			<li class="item"><a href="hogehoge.php">メニュー1</a></li>
			<li class="item"><a href="hogehoge.php">メニュー2</a></li>
			<li class="item"><a href="hogehoge.php">メニュー3</a></li>
		</ul>
	</nav>

CSS

	* {
		padding: 0;
		margin: 0;
	}

	#pagenav {
		width: auto;
		display: flex;
		list-style: none;
		text-align: center;
	}

	/* 1つの場合 */
	.item:only-child {
		width: 100%;
	}
	
	/* 2つの場合 */
	.item:first-child:nth-last-child(2),
	.item:first-child:nth-last-child(2) ~ .item {
		width: calc(100%/2);
	}

	/* 3つの場合 */
	.item:first-child:nth-last-child(3),
	.item:first-child:nth-last-child(3) ~ .item {
		width: calc(100%/3);
	}

	/* 4つの場合 */
	.item:first-child:nth-last-child(4),
	.item:first-child:nth-last-child(4) ~ .item {
		width: calc(100%/4);
	}

	/* 5つの場合 */
	.item:first-child:nth-last-child(5),
	.item:first-child:nth-last-child(5) ~ .item {
		width: calc(100%/5);
	}

	/* 6つの場合 */
	.item:first-child:nth-last-child(6),
	.item:first-child:nth-last-child(6) ~ .item {
		width: calc(100%/6);
	}

参考文献

下記のサイトを参考にすると分かりやすいと思います。

• 要素の個数に応じてスタイルを出し分けるCSSメモ

Comments

[root_jp]

このやり方だと、何個になるか分からない時はどうすればいいんでしょうか？

[root_jp]

あ、1〜6と決まっているのですね。失礼しました。