Flexbox 3 divs, two columns, one with two rows - html

Question

I am trying to take
<div></div>
<div></div>
<div></div>
Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.
I can do this with floats, something like
.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
But I can't seem to get it working in flexbox, is this possible?

Answer 1

The Legit Method:
*Recommended
.flex-row {
flex-direction: row;
display: flex;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 200px;
width: 300px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
The Hackish Method:
*Not Recommended (I'm sure you'll notice why)
.flex-body {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-end;
align-content: stretch;
align-items: stretch;
transform: rotate(90deg);
max-width: 500px;
margin: auto;
}
.flex-body div {
border: 1px solid white;
height: 300px;
flex: 1 1 200px;
}
.flex-body div:last-of-type {
flex: 1 1 300px;
height: 300px;
}
<div class="flex-body">
<div style="background: #0980cc;"></div>
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>

Answer 2

After thinking about this a little more, it is possible with flexbox. The container just has to have a defined height (%, px or vh) will work.
http://codeply.com/go/U1DCKAx85d
body {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100vh;
}
.a {
flex: 0 0 100%;
background: red;
}
.b, .c {
flex: 0 0 50%;
background: green;
}
.c {
background: blue;
}

Answer 3

Using flexbox is very simple, you just need a container for these three div elements.
Let's define a div with a .box class and add the div elements. Also let's add three classes for the colors: .red, .green and .blue and two classes to handle the columns left and right.
<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>
Now we define the box class as a flexbox:
.box {
display: flex;
...
}
Then we define the direction as column (vertical) and if it can be flowed wrap:
.box {
...
flex-flow: column wrap;
...
}
Also, we can define the dimensions of the div elements. left will be 45% of the parent width and 100% of the parent height.
.left {
width: 45%;
height: 100%;
}
While right will be 55% of the parent width and 50% (half) of the parent height.
.right {
width: 55%;
height: 50%;
}
Full example:
.box {
display: flex;
flex-flow: column wrap;
width: 400px;
height: 100px;
}
.red {
background: #cc092f;
}
.green {
background: #09cc69;
}
.blue {
background: #0980cc;
}
.left {
width: 45%;
height: 100%;
}
.right {
width: 55%;
height: 50%;
}
<div class="box">
<div class="left red"></div>
<div class="right green"></div>
<div class="right blue"></div>
</div>