絕對定位項目的靈活寬度

Question

我正在尋找創建日曆的日視圖的網格，其中的項目是根據其開始和結束時間垂直定位和大小的。如果議程項目與其他任何項目不重疊，則其寬度將跨越列的整個寬度;然而，如果項目重疊，他們分開它們之間的寬度。下面的示例圖片：

Full-width items, no overlap

Overlapping items

顯然，這都可以使用JavaScript，一次與所有會議的全部知識來計算。然而，我想知道是否有一個優雅的CSS解決方案來處理這個問題，代碼只需要提供垂直位置和高度？

我問，因爲我希望組織我的React代碼，使每個網格框只需要知道它自己的議程項目的數據，保持良好的封裝;而不需要傳遞其他項目的一堆數據（預處理或不處理）。

Answer 1

這聽起來像是flexbox的完美用例。這也和React很好地搭配。

Bootstrap V4可與Flexbox一起使用。如果您使用PostCSS，另一個不錯的選擇是丟失網格。