Custom layout using flexbox [duplicate] - css

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
Is it possible to create a layout the same as the below one in flexbox?

Answer 1

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>

Answer 2

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>