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

Posted 2023-03-06

【中文标题】CSS Flexbox 样式根据元素数量变化

【英文标题】：CSS Flexbox style changes based on amount of elements

【发布时间】：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 个元素的外观图片

【参考方案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>

【讨论】：

击败我 :)。我发现这个问题很有帮助：***.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。您可以想象将其缩放为带有额外条目的更多项目

【讨论】：

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