Layout possible? Flexbox vs Float layout with multiple columns and rows

Question

I\'m curious if this layout is possible with flexbox. I can\'t seem to work out divs 3 & 4 to fall under #2. This is pretty easy with floats, just curious if I\'m missin

Answer 1

It's very possible and easy with flexbox to achieve the layout by employing three flex containers.

1. The main flex container #rFlex wraps everything into a row.
2. The vertical right is wrapped in #cFlex causing #flex2, #flex3, and #flex4 to flow in a column.
3. Then the flex items #flex3 and #flex4 are set to flow horizontally by #sFlex.
4. #cflex is inline-flex so that it can stay solidly next to #flex1

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
/* Flex Containers */

#rFlex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: auto;
}
#cflex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  height: 80vh;
  width: 45vw;
}
#sFlex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  justify-content: center;
}
/* Flex Items */

.flex {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
#flex1 {
  width: 45vw;
  height: 80vh;
  background: red;
}
#flex2 {
  width: 45vw;
  height: 40vh;
  background: blue;
}
#flex3,
#flex4 {
  width: 22.5vw;
  height: 40vh;
}
#flex3 {
  background: yellow;
}
#flex4 {
  background: green;
}