响应式列，防止孩子在折叠时在列之间移动

Question

我有一个响应式列数网格（台式机上 3 个，平板电脑上 2 个，移动设备上 1 个），当您展开/折叠子项时，所有内容都会在列之间移动。我也想保持秩序：

如何防止这种情况发生？也许有flexbox 解决方案？

例子：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

@media only screen and (max-width: 360px) {
  ul {
    -moz-column-count: 1;
    -moz-column-gap: 20px;
    -webkit-column-count: 1;
    -webkit-column-gap: 20px;
    column-count: 1;
    column-gap: 20px;
  }
}

@media only screen and (min-width: 360px) {
  ul {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
  }
}

ul li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<ul>
  <li><span class="collapsible">Item 1 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 2 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 3 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 4 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 5 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 6 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 7 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 8 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 9 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 10 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 11 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
</ul>

我玩过flexbox 和grid，但我无法解决。

Answer 1

您只需使用display: flex; 和flex-wrap: wrap; 就可以使列响应式响应，而无需任何媒体查询，这将根据可用空间自动包装它们。将列表项放置在它们自己的列中还可以保证它们不会在列之间重新流动（column-count 的默认行为，这听起来像是您想要避免的）。示例：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.container {
  display: flex;
  margin-right: -20px;
  flex-wrap: wrap;
}

.container > * {
  margin-right: 20px;
  flex: 0 0 auto;
}

.content {
  padding: 0 20px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<div class="container">
<ul>
  <li><span class="collapsible">Item 1 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 2 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 3 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 4 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 5 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
</ul>
<ul>
  <li><span class="collapsible">Item 6 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 7 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 8 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 9 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
  <li><span class="collapsible">Item 10 (click to unfold)</span>
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </li>
</ul>
</div>