css - 使用网格区域角度交换元素的位置

Question

我有这个使用网格系统的布局

我使用这个模板创建的

<div class="parent">
<div class="div5"> </div>
<div class="div6"> </div>
<div class="div7"> </div>
<div class="div8"> </div>
</div>

这是样式

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 4 / 4; }
.div2 { grid-area: 1 / 4 / 2 / 5; }
.div3 { grid-area: 2 / 4 / 3 / 5; }
.div4 { grid-area: 3 / 4 / 4 / 5; }

我想交换div它现在正在使用此代码工作的位置

swapVideo(e) {
    if (e.path[4].classList.value == 'div6') {
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div6')[0], "div5");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div6')[0], "div6");
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div6");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div5");
      console.log(this.elem.nativeElement);
    }
    if (e.path[4].classList.value == 'div8') {
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div8')[0], "div5");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div8')[0], "div8");
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div8");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div5");
      console.log(this.elem.nativeElement);
    }
    if (e.path[4].classList.value == 'div7') {
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div7')[0], "div5");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div7')[0], "div7");
      this.renderer.addClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div7");
      this.renderer.removeClass(this.elem.nativeElement.querySelectorAll('.div5')[0], "div5");
      console.log(this.elem.nativeElement);
    }
  }

假设我单击数字 2 更改为数字 1，单击 3 更改为数字 1，然后单击 4 更改为数字 1。基本上我想像这样在小屏幕和大屏幕之间切换，它正在工作，除了我这样做之后以同样的顺序，在我完成所有这些操作后它停止工作，但我仍然在控制台上得到那个元素，有人知道为什么吗？

我也打算使用 flexbox，你认为哪一个适合我的需要？

标签： cssangulartypescript