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

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>