如何通过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

你可以这样做：

.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;声明的情况下进行设置。相对位置优于绝对位置，但您需要知道它们是如何工作的。

Answer 2

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

没有绝对的定位。

没有嵌套容器。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

revised codepen