html - 将多个轮播项目合并到弹性网格中

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>

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

这就是它在桌面屏幕上的样子（不同颜色的图块代表来自不同轮播的项目）：

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

标签： htmlcssresponsive

Answer 1

您可以使用：

.carousel { display: contents }

您可以阅读这篇有趣的文章，从中提取了这句话：

在其最简单的形式中， display: contents 的存在是为了直观地移除元素的框并将其替换为它的内容。

并且来自W3C 规范：

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

这是一个带有工作示例的小提琴。