html - CSS Flexbox 样式根据元素数量而变化

Question

我正在尝试学习 Flexbox，但我在这个练习中遇到了问题。任务是有一个 div，里面有 2 到 4 个 div。当有 2 或 3 个 div 时，它们应该被等宽地划分，并且所有的高度都应该是主 div 的高度。但是，当主 div 中有 4 个 div 元素时，它们将分为两行，每行包含两个 div。

我怎样才能做到这一点？我自己尝试过一些，但无法使其工作:

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这是我创建的 CSS:

#wrapper{
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
}

.item{
  min-width: 33%;
}

包装 Div 内有 2 个元素时的外观图片

包装 Div 内包含 3 个元素的外观图片

包装 Div 内有 4 个元素的外观图片

Answer 1

考虑使用nth-child来控制它:

#wrapper {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  border:5px solid white;
  box-sizing:border-box;
}


.item {
  flex-grow:1;
}

/* apply when there is 4 items */
#wrapper > :first-child:nth-last-child(4),
#wrapper > :first-child:nth-last-child(4) ~ *{
  flex-basis:50%;
}

body {
  margin:auto;
}

<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>