I'm wondering if it's possible to achieve something like this:
using flex-boxes with only three divs inside the wrapper. I know it would be simpler to create two columns, with one wrapping the larger div and another wrapping the other two blocks, but I want to attempt it the way I described earlier.
#row {
margin: 0 auto;
width: 610px;
}
#wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
#x-1,
#x-2,
#x-3 {
margin: 5px;
background-color: red;
}
#x-1 {
height: 250px;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
#x-2 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 200px;
-ms-flex: 1 1 200px;
flex: 1 1 200px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#x-3 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 200px;
-ms-flex: 1 1 200px;
flex: 1 1 200px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#x-2,
#x-3 {
height: 50px;
}<div id="row">
<div id="wrapper">
<div id="x-1"></div>
<div id="x-2"></div>
<div id="x-3"></div>
</div>
</div>