So far my code is putting two small ones and the large one in the top row, and then the second small ones on the bottom row.
CodePudding user response：
Something like this.
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.item {
width: 100%;
margin: 1em;
}
.content {
border: 1px solid black;
margin-bottom: 1em;
height: 100%;
}
<div class="container">
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
<div class="item content">full</div>
<div class="item">
<div class="content">half</div>
<div class="content">half</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
CodePudding user response：
Html
<div class"parent">
<div class="leftContent"></div>
<div class="centerContent"></div>
<div class="rightContent"></div>
</div>
Css
.parent{
width: 100%;
display: flex;
justify-content: space-between;
align-items: stretch;
}
.leftContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
.rightContent{
display: flex;
justify-content: space-between;
height: 100%;
flex-direction: column;
align-items: stretch;
}
add now the contents in the divs. i think this should work
