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);
        });
    }
};

制作平衡列，当元素更改大小时不会重排

1 个答案: