这是我正在尝试制作的布局:
我正在尝试实现一个困难的弹性盒布局,并且我有一个困难的限制,即其中一个项目是 Webgl 播放器,并且无法有条件地渲染,因为这会重新启动 WebGl 播放器。单击时所有项目都应该能够占据项目 1 的位置。知道第 2 项只能更改其顺序,而不能更改其父级,您将如何编写此 Flex 布局代码。
我尝试过将第 2 项设置为绝对定位,尽管这不太理想。
这是使用 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>