css - 制作元素改变大小时不回流的平衡列

Question

我有一个要在列中显示的内容列表。每个事物都有一个默认情况下隐藏的描述，但在您单击列表项时会展开并显示:

<ul>
  <li>First item <div>Here is the description of the first item. This description is extra-super-long so you can see the undesirable reflow behavior in non-flexbox methods.</div></li>
  <li>Second item <div>Here is the description of the second item.</div></li>
  <li>Third item <div>Here is the description of the third item.</div></li>
  <li>Fourth item <div>Here is the description of the fourth item.</div></li>
  <li>Fifth item <div>Here is the description of the fifth item.</div></li>
  <li>Sixth item <div>Here is the description of the sixth item.</div></li>
  <li>Seventh item <div>Here is the description of the seventh item.</div></li>
  <li>Eighth item <div>Here is the description of the eighth item.</div></li>
  <li>Ninth item <div>Here is the description of the ninth item.</div></li>
  <li>Tenth item <div>Here is the description of the tenth item.</div></li>
  <li>Eleventh item <div>Here is the description of the eleventh item.</div></li>
</ul>

---

$(document).ready(function() {
  $('li div').hide();

  $('li').on('click', function() {
    $(this).children().slideToggle();
  });
});

没有the column methods I've tried让我在调整元素大小时获得我想要的确切行为。

With CSS columns ，扩展/收缩元素会使元素在被推到第二列或从第二列拉出时变得不吸引人。

With floated items ，这种转变不那么卡顿，但它们的排序方式令人困惑。

With flexbox ，我可以得到一些很好的行为，但元素会先横穿再向下——根本不是真正的列。

我已经用 flex-direction: column 尝试了一些东西，但我是 flexbox 的新手，我不清楚如何在不指定 flex 的固定高度的情况下获得多个列容器。

有没有一种好的方法可以让 HTML/CSS/JS 中的平衡列在子元素改变大小时保持稳定？

Answer 1

到目前为止，我发现的最佳选择是使用 JavaScript 来 forcibly set the order CSS property用上面的水平 flexbox 版本模拟列:

var reorderCourses = function($items, numCols) {
    var count = $items.length;
    var numPerCol = Math.ceil(count / numCols);
    var columns = [];

    for(var i = 0; i < numCols; i++) {
        columns[i] = $items.slice(i * numPerCol, (i + 1) * numPerCol);
    }

    for(i = 0; i < columns.length; i++) {
        columns[i].each(function(index) {
            $(this).css('order', (index * numCols) + i);
        });
    }
};