Hi I am trying to build this layout with flexbox.I provided my current code because i dont know how to move further.Even i posted image how iut should look like under the code.I tried everything but i cant achieve these result. Columns 2,3,5,6,7,8 must be same size. Im new to flex box and i really want to achieve this goal. Thanks for any help.
.tall {
height: 300px;
}
.content {
display: flex;
height: 100%;
}
.left {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
padding-bottom: 50px;
}
.right3collumns {
display: flex;
flex-direction: column;
flex: 2;
}
.box2:nth-child(1) {
background-color: teal;
}
.box2:nth-child(2) {
background-color: red;
}
.box2:nth-child(3) {
background-color: blue;
}
.right {
flex: 2;
background: #22B14C;
}
.right2 {
display: flex;
flex-basis: 200px;
flex-direction: column;
background-color: red;
}
.right2small {
flex-basis: 100px;
background-color: turquoise;
}
.box:nth-child(1) {background: #ED1C24;}
.box:nth-child(2) {background: #00A2E8;}
.box:nth-child(3) {background: #FFAEC9;}<div class="content"><div class="right"><img src="assets/group.png" alt="group"></div><div class="left"><div class="box">Small DIv</div><div class="box">Small DIv</div></div><div class="right2">bigger</div><div class="right2small">smaller</div><div class="right3collumns"><div class="box2">Small DIv</div><div class="box2">Small DIv</div><div class="box2">Small DIv</div></div></div>