绝对定位的项目的灵活宽度

Question

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

Full-width items, no overlap

Overlapping items

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

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

Answer 1

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

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