html - 如何通过 CSS FLEX for RWD 将列跨度更改为行跨度

Question

我想使用相同的 HTML 结构在桌面和移动设备上显示由 FLEX 组成的表格，但我不知道将列跨度更改为行跨度，我知道 position: absolute 它是不是维护的好主意

---

codepen

.wrapper {
    display: flex;
}

.block {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block1 {
    background-color: cadetblue;
}

.block2 {
    background-color: cornflowerblue;
}

.block3 {
    background-color: beige;
}

.col-span {
    height: 100%;
}

/* row span */

.row-span-sample {
   position: relative;
}

.row-span {
    width: 200%;
    position: absolute;
    left: -100%;
}

<h1>column span on Desktop</h1>
<div class="wrapper">
  <div class="row">
    <div class="block block1 col-span">1</div>
  </div>
  <div class="row">

    <div class="block block2">2</div>
    <div class="block block3">3</div>
  </div>
</div>

<h1>row span on mobile</h1>
<div class="wrapper">
  <div class="row row-span-sample">
    <div class="block block1">1</div>
  </div>
  <div class="row row-span-sample">

    <div class="block block2">2</div>
    <div class="block block3 row-span">3</div>
  </div>
</div>

我可以在没有 position: absolute 的情况下更改它吗？

Answer 1

这是一个使用 CSS 网格布局和媒体查询的非常简单的解决方案。

没有绝对定位。

没有嵌套的容器。

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
  grid-template-areas:
    "one two"
    "one three";
}

@media (max-width: 700px) {
  .wrapper {
    grid-template-areas:
      "one two"
      "three three";
  }
}

.block1 { grid-area: one; background-color: cadetblue; }
.block2 { grid-area: two; background-color: cornflowerblue; }
.block3 { grid-area: three; background-color: beige; }

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

<div class="wrapper">
    <div class="block block1">1</div>
    <div class="block block2">2</div>
    <div class="block block3">3</div>
</div>

revised codepen