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

Question

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

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

过滤请求没有问题，但布局有问题：第一次尝试是设置 'vertical' layout-mode 但内容确实没有填满可用的高度。

Answer 1

你应该使用 CSS 来解决这个问题，尤其是 flexbox。更多详情请见here。

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

.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>