将多个轮播项目合并到Flex网格中

Question

考虑以下HTML：

<div class="wrapper">
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

如果我的班级不清楚，这里有两个基本的轮播...但是，如果我们想（在桌面屏幕上）将这些.item div从.carousel个父级中拆分出来，将它们合并到具有自定义顺序（无需使用JS操作DOM ）的flex网格中。

这是在桌面屏幕上应该是的样子（不同颜色的图块代表来自单独轮播的项目）

注意：如前所述，使用javascript很容易实现，我正在尝试确定是否有可能在没有em的情况下实现它。

Answer 1

您可以使用：

.carousel { display: contents }

您可以阅读this interesting article，该句子的来源是

以最简单的形式显示：显示内容是为了视觉上移除元素的框并将其替换为内容。

并从W3C Spec：

元素本身不会生成任何框，但是其子元素和伪元素仍会生成框，并且文本照常运行。出于框生成和布局的目的，必须将元素视为在元素树中已被其内容替换（包括其源文档子元素及其伪元素，例如:: before和:: after）。伪元素，通常在元素的子元素之前/之后生成。

这是一个Fiddle，上面有一个有效的示例。