Flexbox columns multiple children - html

Question

Using flex-boxes and only four divs inside the container…
I cannot handle it…
I was stack on it…
.container {
display: flex;
flex-flow: column nowrap;
}
.x-1 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-2 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-3 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-4 {
background: red;
height: 700px;
width: 800;
margin: 10px 10px 0 0;
}
<div class="container">
<div class="x-1"></div>
<div class="x-2"></div>
<div class="x-3"></div>
<div class="x-4"></div>
</div>
EDIT
I'll start from the beginning. I would like to get the same effect as in the image. I insert the code below.
.container {
display: flex;
padding: 0 100px;
}
.left {
display: flex;
flex-direction: column;
}
.box-1 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 0;
}
.box-2 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 0;
}
.box-3 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 0;
}
.box-4 {
width: 100%;
background: red;
height: 800px;
margin: 10px 10px;
}
<div class="container">
<div class="left">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="box-4"></div>
</div>

Answer 1

I've rewritten styles to achieve adaptivity, flexibility and maintainability:
.container {
display: flex;
/* taking margins into account, so 90px */
padding: 0 90px;
}
.left {
display: flex;
flex-direction: column;
}
.box-1,
.box-2,
.box-3,
.box-4 {
margin: 10px;
}
.box-1,
.box-2,
.box-3 {
background: yellow;
width: 200px;
height: 200px;
}
.box-4 {
background: red;
flex: 1;
height: 800px;
}
#media only screen and (max-width: 900px) {
.container {
flex-direction: column-reverse;
}
.left {
flex-direction: row;
flex-wrap: wrap;
}
.box-1,
.box-2 {
width: auto;
flex: 1 0 0;
}
.box-3 {
width: auto;
flex: 0 1 100%;
}
}
#media only screen and (max-width: 700px) {
.container {
flex-direction: column-reverse;
}
.left {
flex-direction: column;
flex-wrap: nowrap;
}
.box-1,
.box-2,
.box-3,
.box-4 {
width: auto;
flex: 1 0 auto;
}
}
<div class="container">
<div class="left">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
<div class="box-4"></div>
</div>
Here is jsFiddle to test resizing.

Answer 2

You can wrap the yellow boxes in their own container...
.container {
display: flex;
}
.left {
display: flex;
flex-direction: column;
}
.left div[class^='x'] {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-4 {
background: red;
height: 700px;
width: 800px;
margin: 10px 10px 0 0;
}
<div class="container">
<div class="left">
<div class="x-1"></div>
<div class="x-2"></div>
<div class="x-3"></div>
</div>
<div class="x-4"></div>
</div>

Answer 3

you just have to have divs to your code
.container {
display: flex;
}
.x-1 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-2 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-3 {
background: yellow;
height: 200px;
width: 200px;
margin: 10px 10px 0 0;
}
.x-4 {
background: red;
height: 700px;
width: 800px;
margin: 10px 10px 0 0;
}
<div class="container">
<div>
<div class="x-1"></div>
<div class="x-2"></div>
<div class="x-3"></div>
</div>
<div>
<div class="x-4"></div>
</div>
</div>

Answer 4

You can use CSS Grid layout here. Here is demo, I removed redundant .left block and rewrited styles. This will work even in IE10+:
.container {
/* taking margins into account, so 90px */
padding: 0 90px;
display: -ms-grid;
display: grid;
/* taking margins into account, so 220px */
-ms-grid-columns: 220px 1fr;
grid-template-columns: 220px 1fr;
-ms-grid-rows: auto auto 1fr;
grid-template-rows: auto auto 1fr;
}
.box-1,
.box-2,
.box-3,
.box-4 {
margin: 10px;
}
.box-1,
.box-2,
.box-3 {
background: yellow;
height: 200px;
}
.box-2 {
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 1;
grid-column: 1;
}
.box-3 {
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 1;
grid-column: 1;
}
.box-4 {
background: red;
height: 800px;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: 1 / span 3;
-ms-grid-column: 2;
grid-column: 2;
}
#media only screen and (max-width: 900px) {
.container {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr auto auto;
grid-template-rows: 1fr auto auto;
}
.box-1 {
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 1;
grid-column: 1;
}
.box-2 {
-ms-grid-row: 2;
grid-row: 2;
-ms-grid-column: 2;
grid-column: 2;
}
.box-3 {
-ms-grid-row: 3;
grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / span 2;
}
.box-4 {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / span 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column: 1 / span 2;
}
}
#media only screen and (max-width: 700px) {
.container {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 1fr auto auto auto;
grid-template-rows: 1fr auto auto auto;
}
.box-1,
.box-2,
.box-3,
.box-4 {
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1 / span 1;
}
.box-1 {
-ms-grid-row: 2;
grid-row: 2;
}
.box-2 {
-ms-grid-row: 3;
grid-row: 3;
}
.box-3 {
-ms-grid-row: 4;
grid-row: 4;
}
.box-4 {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1 / span 1;
}
}
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
</div>
Here is jsFiddle to test resizing.