绝对定位的物品的灵活宽度

Question

我正在考虑为日历的日视图创建网格，其中项目根据其开始和结束时间垂直定位和调整大小。如果议程项目与其他任何内容不重叠，则其宽度将跨越列的整个宽度;但是，如果项目重叠，它们会在它们之间分割宽度。示例图片如下：

Full-width items, no overlap

Overlapping items

显然，这一切都可以使用Javascript计算，同时完全了解所有会议。但是，我想知道是否有一个优雅的CSS解决方案来处理这个问题，代码只需要提供垂直位置和高度？

我问，因为我希望组织我的React代码，这样每个网格框只需要知道自己议程项目的数据，保持良好的封装;而不是需要传递一堆关于其他项目的数据（预处理或不处理）。

Answer 1

这听起来像是flexbox的完美用例。这也与React很好地配合。

Bootstrap V4可与flexbox一起使用。如果您使用PostCSS，另一个不错的选择是丢失网格。