Is there a way to build this layout with flexbox? - html

Question

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>

Answer 1

Here is one way of achieving the layout, I strongly advise, if you can, to use CSS Grid instead.
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>
You can modify the CSS/SCSS code to change the layout for different breakpoints using the CSS #media rules.
For example, you can have everything stacked, when the viewport is less than or equal to 960px.
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>