时间戳

首页 > 解决方案 > 当元素可见和不可见时，CSS Flexbox 在不同的行中显示元素

html - 当元素可见和不可见时，CSS Flexbox 在不同的行中显示元素

问题描述

我正在尝试学习 Flexbox，但我在这个练习中遇到了问题。任务是有一个 div 里面有 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 invisible"></div>
</div>

这是我创建的 CSS：

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

  display: flex;
  flex-wrap: wrap;
}

.item{
  min-width: 33%;
}

.invisible{
  display: none;
}

包装器 Div 中包含 2 个元素的外观图片

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

主Div中的3个元素

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

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

主Div中的3个元素

包装器 Div 中包含 4 个元素的外观图片

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

主Div中的4个元素

标签： htmlcssflexbox

解决方案

这是一个使用 CSS 网格的想法。默认情况下，我有一个列布局，其中一行包含 1 到 3 个项目，只有当有 4 个项目时，布局才会更改为两行。要检测到这一点，所有项目都需要没有不可见的类

#wrapper {
  height: 200px;
  width: 200px;
  display: inline-grid;
  vertical-align:top;
  
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  border:5px solid white;
}

.invisible {
  display:none;
}

/* this will select the last item and move it to second row*/
:not(.invisible) + :not(.invisible) + :not(.invisible) + :not(.invisible) {
  grid-row:2;
}

/* this will make sure the blue remain in the first row*/
:first-child:not(.invisible) + :not(.invisible) {
  grid-column:2;
}
<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>
<div id="wrapper">
  <div class="item invisible" 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>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item " style="background:yellow;"></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 invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item " style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>

推荐阅读