制作元素改变大小时不会重排的平衡列答案

【问题标题】：Making balanced columns that don't reflow when elements change size制作元素改变大小时不会重排的平衡列
【发布时间】：2015-08-18 14:50:04
【问题描述】：

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

<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 中的列在子元素改变大小时保持稳定？

【问题讨论】：

标签： css css-float multiple-columns flexbox

【解决方案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);
        });
    }
};

【讨论】：