rowspan or colspan in flexbox? - html

Question

I am a backend programmer by profession. But I have just started to learn flexbox and I want to hit the sky with flexbox.
So, I created a simplest design but which looks most complicated to me when creating it using flexbox.
Here is the design:
Guys, I am not able to figure out, how to use flexbox in such a case as there is no row or column. I don't know but is there anything like rowspan or colspan in flexbox that I can use to arrange these divs as shown in image above?
Here is my code:
HTML:
<div class="wrapper">
<div class="div-wrapper1">
<div class="inner-wrapper1">
<div class="div1"></div>
<div class="fake1"></div>
</div>
<div class="div2"></div>
</div>
<div class="div-wrapper2">
<div class="div3"></div>
<div class="inner-wrapper2">
<div class="fake2"></div>
<div class="div4"></div>
</div>
</div>
<div class="div-center"></div>
</div>
CSS:
.wrapper {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.div-wrapper1 {
display: flex;
flex: 1;
}
.div-wrapper2 {
display: flex;
flex: 1
}
.inner-wrapper1 {
display: flex;
flex: 3;
flex-direction: column;
}
.div1 {
background-color: red;
display: flex;
flex: 3
}
.fake1 {
display: flex;
flex: 1
}
.div2 {
background-color: green;
display: flex;
flex: 2
}
.div3 {
background-color: blue;
display: flex;
flex: 2
}
.inner-wrapper2 {
display: flex;
flex: 3;
flex-direction: column;
}
.div4 {
background-color: yellow;
display: flex;
flex: 3
}
.fake2 {
display: flex;
flex: 1
}
.div-center {
background-color: black;
}
This is my output:
Here is the codepen

Answer 1

Maybe a solution is to simply add a negative margin to .div-wrapper1 and you will get the exact layout :
.wrapper {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.div-wrapper1 {
display: flex;
flex: 1;
}
.div-wrapper2 {
display: flex;
flex: 1;
margin-top: -30px;
}
.div-wrapper3 {
display: flex;
flex: 1
}
.inner-wrapper1 {
display: flex;
flex: 3;
flex-direction: column;
}
.div1 {
background-color: red;
display: flex;
flex: 3
}
.fake1 {
display: flex;
flex: 1
}
.div2 {
background-color: green;
display: flex;
flex: 2
}
.div3 {
background-color: blue;
display: flex;
flex: 2
}
.inner-wrapper2 {
display: flex;
flex: 3;
flex-direction: column;
}
.div4 {
background-color: yellow;
display: flex;
flex: 3
}
.fake2 {
display: flex;
flex: 1
}
.div-center {
background-color: black;
}
<div class="wrapper">
<div class="div-wrapper1">
<div class="inner-wrapper1">
<div class="div1"></div>
<div class="fake1"></div>
</div>
<div class="div2"></div>
</div>
<div class="div-wrapper2">
<div class="div3"></div>
<div class="inner-wrapper2">
<div class="fake2"></div>
<div class="div4"></div>
</div>
</div>
<div class="div-center"></div>
</div>
And if you want here is another solution without any negative values and a content inside the white part (simply adjust height/width as you need) :
.first,
.second {
display: flex;
height: 100px;
width: 200px;
}
.first:before {
content: "";
background: red;
flex: 3;
}
.first:after {
content: "";
background: green;
flex: 2;
}
.second:before {
content: "";
background: blue;
flex: 2;
}
.second:after {
content: "";
background: yellow;
flex: 3;
}
.fake {
display: flex;
height: 20px;
width: 200px;
}
.fake a {
flex: 1;
text-align: center;
}
.fake:before {
content: "";
background: blue;
flex: 2;
}
.fake:after {
content: "";
background: green;
flex: 2;
}
<div class="first">
</div>
<div class="fake">
link
</div>
<div class="second">
</div>
Here is another solution by simply using multiple linear-gradient:
.box {
display: flex;
height: 220px;
width: 200px;
justify-content: center;
align-items: center;
background-image:linear-gradient(to right,red 66%,green 0%),
linear-gradient(to right,blue 33%,white 0%,white 66%,green 66%),
linear-gradient(to right,blue 33%,yellow 0%);
background-size:100% 100px,100% 20px,100% 100px;
background-position:top,center,bottom;
background-repeat:no-repeat;
}
<div class="box">
link
</div>