How Can I Use Flexbox To Align Two Boxes In A Column, Next To A Row?

What I would like to do is quite particular, so I've drawn a picture to illustrate it: I can easily implement this: but it doesn't look good on this site because the E element is

Solution 1:

Flexbox is 1D layout. Of course you can add some nesting, some fixed heights, but it's 1D and isn't perfect solution here.

It's much much better to use CSS Grid Layout here, because it's 2D layout.

.grid {
  display: grid;
}

/* just styles for demo */.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */@media screen and (min-width: 700px) and (max-width: 999px) {
  .a {
    grid-column: 1 / span 2;
  }
}

/* wide screen */@media screen and (min-width: 1000px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    grid-column: 1 / span 2;
  }
  
  .d {
    grid-row: 3;
  }
  
  .e {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
}

<divclass="grid"><divclass="grid__item a">A</div><divclass="grid__item b">B</div><divclass="grid__item c">C</div><divclass="grid__item d">D</div><divclass="grid__item e">E</div></div>

If you need IE/Edge support you'll have to use outdated syntax and specify place for every row manually. IE/Edge implementation doesn't have grid cell auto-placement. So if you don't specify grid-column/grid-row for every cell they will all stack in very first cell. So for IE/Edge -ms-grid-row and -ms-grid-column default value is 1. Demo:

.grid {
  display: grid;
}

/* just styles for demo */.grid__item {
  font-size: 3em;
  padding: 20px;
  background-color: orange;
  color: white;
  margin: 10px;
  
  /* using flexbox for text centering */display: flex;
  align-items: center;
  justify-content: center;
}

/* medium screen */@media screen and (min-width: 700px) and (max-width: 999px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-row: 2;
  }
  
  .c {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  
  .d {
    -ms-grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}

/* wide screen */@media screen and (min-width: 1000px) {
  .grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .a {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
  }
  
  .b {
    -ms-grid-column: 3;
  }
  
  .c {
    -ms-grid-row: 2;
  }
  
  .d {
    -ms-grid-row: 3;
    grid-row: 3;
  }
  
  .e {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / span 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}

<divclass="grid"><divclass="grid__item a">A</div><divclass="grid__item b">B</div><divclass="grid__item c">C</div><divclass="grid__item d">D</div><divclass="grid__item e">E</div></div>

If you want to test resizing here is jsFiddle.

Solution 2:

demo

change the flex value as you desired

.box {
  background-color: green;
  margin: 5px; 
  /* padding: 30px; */
}

.one {
   display: flex; 

}

.a {
  flex: 3;
}

.b {
  flex: 2;
}

.two {
  display: flex;
  
}

.three {
  flex: 2;
}

.four {
  flex: 3;
}

<divclass="main"><divclass="one"><divclass="a box">a</div><divclass="b box">b</div></div><divclass="two"><divclass="three"><divclass="c box">c</div><divclass="d box">d</div></div><divclass="four box"><divclass="e">e</div></div></div></div>