CSS Flexbox 样式根据元素数量变化答案

【问题标题】：CSS Flexbox style changes based on amount of elementsCSS Flexbox 样式根据元素数量变化
【发布时间】：2020-08-22 02:02:32
【问题描述】：

我正在尝试学习 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 个元素的外观图片

【问题讨论】：

标签： html css flexbox css-selectors

【解决方案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>

【讨论】：

击败我 :)。我发现这个问题很有帮助：stackoverflow.com/a/12198561/8031815。此外，2n 比 4 更具有可扩展性。
非常感谢！有没有办法用隐藏元素做到这一点？
@Stephen 你是如何隐藏它们的？显示：无？

【解决方案2】：

尝试将以下内容更改为您的 CSS

.item{
  min-width: 33%;
  flex-grow: 1;
}

.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
    min-width: 50%;
}

这仅适用于 CSS3。您可以想象将其缩放为带有额外条目的更多项目

【讨论】：

谢谢！有没有办法用隐藏元素做到这一点？