元素网格排列 CSS答案

【问题标题】：Elements grid arranging CSS元素网格排列 CSS
【发布时间】：2019-05-08 07:57:21
【问题描述】：

我正在尝试实现一个场景：当您单击一个框时，它会在下一行显示一个“长框”（全宽）。问题是我在点击对象后有一个间隙。

是否可以在下一行显示“长框”而不使用 CSS 更改小框的结构？ jsfiddle链接：jsfiddle.net/mhLv7zj1/

$(document).ready(function(){ 
    $(".box").click(function(){
      $(this).next('.open').toggleClass('toggled');
    });
    $(".open").click(function(){
      $(this).toggleClass('toggled');
    });
})

【问题讨论】：

这里是jsfiddle.net/mhLv7zj1
请阅读您无法将小提琴链接放在问题中的原因并修复它，否则您的问题偏离主题：寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。
有点 - codepen.io/Paulie-D/pen/XVdVmg
感谢 Paulie_D！这就是我搜索的内容：codepen.io/Paulie-D/pen/XVdVmg

标签： javascript html css flexbox

【解决方案1】：

这是一种选择。您可以从 HTML 中删除所有 li class="open"，而是在每次点击时使用此算法：

隐藏/删除任何已经open 的项目
calculate the number of items in the flex row被点击的项目所在的位置和位置
然后你就会知道在哪里进行插入，所以：在这一行的末尾，动态插入一个open 项目（提前设置样式，使其占据一整行（flex: 0 0 100%;）李>

【讨论】：

【解决方案2】：

使用flex 和flex-basis 属性。

$(document).ready(function() {
  $(".box").click(function() {
    $(this).next('.open').toggleClass('toggled');
  });
  $(".open").click(function() {
    $(this).toggleClass('toggled');
  });
})

ul {
  display: flex;
  list-style: none;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  background: blue;
  height: 80px;
  flex: 1 1 32%;
  margin-right: 2px;
  margin-bottom: 2px;
}

.open {
  display: none;
  background: red;
  width: 100%;
  height: 80px;
}

.toggled {
  display: flex;
  flex-basis: 66.5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
  <li class="box"></li>
  <li class="open"></li>
</ul>

【讨论】：

【解决方案3】：

问题在于红色框是蓝色框的兄弟，所以当您将它们设为display:block 时，它们会将其他内容推向四周。您需要将红框设为蓝框的子级，并使用相对定位来达到您想要的效果。

let boxes = document.querySelectorAll('ul > li');

boxes.forEach(b => {
  b.addEventListener('click', expand.bind(b));
});

function expand() {
  this.querySelector('.open').classList.toggle('visible');
}

ul {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  flex-basis: 33%;
  height: 150px;
  background: blue;
  border: 1px solid white;
}

div.open {
  display: none;
  position: relative;
  top: calc(100% + 1px);
  left: -1px;
  width: calc(300% + 4px);
  height: 150px;
  border: 1px solid white;
  background: red;
  z-index: 1;
}

.visible {
  display: block!important;
}

<ul>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
  <li> <div class="open"></div> </li>
</ul>

PS。此示例不是您的代码的完美固定副本，但它应该让您走上正确的轨道。

【讨论】：