Как изменить диапазон столбцов на диапазон строк с помощью CSS FLEX для 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 Grid Layout и медиа-запроса.

Нет абсолютного позиционирования.

Нет вложенных контейнеров.

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

пересмотренная кодовая ручка

Answer 2

Вы можете сделать это:

.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; комментария. Относительные позиции лучше абсолютных, но вам нужно знать, как они работают.