同位素 - 如何填充容器的整个高度

Question

我正在尝试使用 js Isotope 库来开发一个显示可变数量的项目/盒子的页面。
无论项目的数量如何，这组框都应始终填充可用空间（假设容器）的整个高度的一列 - 当然会自动更改单个项目的高度。

我的意思是：第一步，如果我需要显示 3 个盒子，垂直空间应该被分成 3 个相等的空间。 在框中单击时，我为 Isotope 对象设置了不同的过滤器，过滤后的项目也应填充相同的垂直空间。

过滤请求没有问题，但布局有问题：第一次尝试设置“垂直”布局模式，但内容未填充可用高度。

Answer 1

您应该使用 CSS 来解决这个问题，尤其是 flexbox。 有关更多详细信息，请参阅此处。

唯一的强制性要求是为容器设置高度。

 .container { display: flex; flex-wrap: wrap; flex-grow: 1; width: 200px; /* For demo purpose */ background-color: green; /* For demo purpose */ height: 100px; } .box { width: 100%; background-color: blue; /* For demo purpose */ border: 1px red solid; /* For demo purpose */ }

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <hr> <div class="container"> <div class="box"></div> </div>