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

我想使用相同的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的情况下更改它吗？

最佳答案

你可以这样做：

.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: relative;
    left: 0;
    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>

我做了什么？只需将absolute值从position属性更改为relative。
将left属性设置为0。
为什么会这样？因为，如果您定义了一个位置（relative或absolute），那么您可以设置位置（因为我们习惯于仅当absolute位置存在时才设置它们）。
此外，您可以设置它而不需要left: 0;语句。相对位置比绝对位置好，但你需要知道它们是如何工作的。

关于html - 如何通过CSS FLEX for RWD将列跨度更改为行跨度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50264544/