Flexbox 布局，无需将项目重新渲染到新父级

Question

这是我正在尝试制作的布局：

我正在尝试实现一个困难的弹性盒布局，并且我有一个困难的限制，即其中一个项目是 Webgl 播放器，并且无法有条件地渲染，因为这会重新启动 WebGl 播放器。单击时所有项目都应该能够占据项目 1 的位置。知道第 2 项只能更改其顺序，而不能更改其父级，您将如何编写此 Flex 布局代码。

我尝试过将第 2 项设置为绝对定位，尽管这不太理想。

Answer 1

这是使用 css 网格实现设计目标的示例

const get = query => [...document.querySelectorAll(query)];

get("section").forEach(el => 
  el.addEventListener("click", () => {
    const isTwo = el.classList.contains("two");
    const isThree = el.classList.contains("three");
    const isFour = el.classList.contains("four");
    const isFive = el.classList.contains("five");
    const currentOne = get(".one")[0];
    if (isTwo) {
      el.classList.remove("two");
      currentOne.classList.add("two");
    }
    if (isThree) {
      el.classList.remove("three");
      currentOne.classList.add("three");
    }
    if (isFour) {
      el.classList.remove("four");
      currentOne.classList.add("four");
    }
    if (isFive) {
      el.classList.remove("five");
      currentOne.classList.add("five");
    }
    currentOne.classList.remove("one");
    el.classList.add("one");
  })
);

body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  height: 100vh;
  margin: 0;
}

section {
  grid-column: span 2;
  display: grid;
  place-items: center;
  font-size: 18pt;
  transition: font-size 200ms;
  user-select: none;
  cursor: pointer;
  background: var(--color);
  order: var(--order);
  color: white;
  font-family: sans-serif;
}

.one {
  grid-column: span 4;
  grid-row: span 3;
  cursor: unset;
}

.four, .five {
  grid-column: span 1;
}

section:hover {
  font-size: 30pt;
}

.one { 
  --order: 1;
}
.two { 
  --order: 2;
}
.three { 
  --order: 3;
}
.four { 
  --order: 4;
}
.five { 
  --order: 5;
}

.red {
  --color: red;
}

.blue {
  --color: blue;
}

.green {
  --color: green;
}

.yellow {
  --color: yellow;
  color: black;
}

.purple {
  --color: purple;
}

<section class="one red">1</section>
<section class="two blue">2</section>
<section class="three green">3</section>
<section class="four yellow">4</section>
<section class="five purple">5</section>