Размещение блоков с помощью flex

Question

Нужно разместить блоки таким образом. Использовать flex.

Вот мой код, реально вообще такую структуру реализовать? Grid использовать нельзя.

.parentone {
  display: inline-flex;
  width: 90%;
  justify-content: space-between;
}

.block1 {
  width: 15%;
  height: 480px;
  border: 1px solid white;
  background-color: purple;
}

.block2 {
  width: 45%;
  height: 480px;
  border: 1px solid white;
  background-color: purple;
}

.block3 {
  width: 30%;
  height: 320px;
  border: 1px solid white;
  background-color: purple;
}

.boubleblock {
  width: 15%;
  height: 160px;
  border: 1px solid white;
  background-color: purple;
}

<body>
  <div class="parentone">
    <div class="block1"><span>1</span></div>
    <div class="block2"><span>2</span></div>
    <div class="block3"><span>3</span></div>
    <div class="boubleblock"><span>4</span></div>
    <div class="boubleblock"><span>5</span></div>
  </div>
</body>

Answer 1

.horizontal {
  flex-direction: row;
}

.vertical {
  flex-direction: column;
}

.parentone {
  display: flex;
  width: 100%;
}

.block1 {
  width: 15%;
  height: 480px;
  border: 1px solid white;
  background-color: purple;
}

.block2 {
  width: 45%;
  height: 480px;
  border: 1px solid white;
  background-color: purple;
}

.block3 {
  width: 100px;
  height: 320px;
  border: 1px solid white;
  background-color: purple;
}

.boubleblock {
  width: 50px;
  height: 160px;
  border: 1px solid white;
  background-color: purple;
}

<body>
  <div class="parentone horizontal">
    <div class="block1"><span>1</span></div>
    <div class="block2"><span>2</span></div>
    <div class="parentone vertical">
      <div class="block3"><span>3</span></div>
      <div class="parentone horizontal">
        <div class="boubleblock"><span>4</span></div>
        <div class="boubleblock"><span>5</span></div>
      </div>
    </div>
  </div>
</body>

БЛОГ НА HUSL

Размещение блоков с помощью flex

Ответы (1 шт):