CSS 子要素数によってサイズを変えたい

Question

数によって子要素のサイズが替わるようにしたいと考えているのですが、具体的な方法が思いつかないため、質問させてください。

例
子要素1つ
親要素に対して画面いっぱい

2つ
親要素に対して2分割

3つ
親要素に対して3分割

4つ
親要素に対して4分割

コード等なくて申し訳ないのですが、ご教授いただけると幸いです。

Answer 1

Flexbox の基本的な使い方/Web Design Leaves

コード例

<div class="container">
  <div>Item1</div>
</div>
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
</div>
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
</div>
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <div>Item4</div>
</div>

.container {
  display: flex;
  gap: 5px;
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
}
.container > div {
  background-color: pink;
  border: 1px solid red;
  flex-grow: 1;
}

Flexアイテム（子要素）に flex-grow: 1; を設定すると均等に拡張するので、子要素数で分割されます。

CodePenサンプル

Comments

[afro097]

ご回答ありがとうございます！
上記のように実装したらできました！

Answer 2

簡単な回答で申し訳ございませんが、flexbox使うのはいかがでしょうか？
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

Comments

[afro097]

ありがとうございます！
Flexboxは使ってことがなかったので大変勉強になりました！