Custom layout using flexbox

Question

Is it possible to create a layout the same as the below one in flexbox?

Answer 1

It's not possible yet, to set all of them only in a container, you must have 3 containers.

Or you can also use CSS Grid. It's more preferred for these use cases.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  width: 400px;
  height: 200px
}

article {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  background-color: orange
}

.first {
  grid-column: 1/ 2;
  grid-row: 1/ 3
}

.second {
  grid-column: 2/ 4;
}

.third {
  grid-column: 2/ 4;
  grid-row: 2/ 3
}

.forth {
  grid-column: 4/ 5;
  grid-row: 1/ 3
}

<section class="container">
  <article class="first">1</article>
  <article class="second">2</article>
  <article class="third">3</article>
  <article class="forth">4</article>
</section>

Answer 2

You can also make this layout with 3containers if you want it as flexbox.

.container {
  display:flex;
  width: 400px;
  height: 200px
}

.container1 article, .container3 article {
  width: 100px;
  height: 200px;
  background-color: orange
}

.container2 article {
  width: 200px;
  height: 100px;
  background-color: red;
  border: 1px solid blue
}

.container2 {
  display: flex;
  flex-direction: column;
}

article {
  display: flex;
  justify-content: center;
  align-items: center
}

<section class="container">
  <section class="container1">
    <article>1</article>
  </section>
  <section class="container2">
    <article>2</article>
    <article>3</article>
  </section>
  <section class="container3">
    <article>4</article>
  </section>
</section>