如何在vue中修改flex布局

怎么把样式布局修改？
原来是左边右边各一半，如何修改成左边占50%，右边上下各50%的布局？

基于原来的布局基础，把右边div再度分成上线两块不就可以了，


```html
<div class="left">
</div>
<div class="right>
    <div class="rightTop"></div>
    <div class="rightBottom"></div>
</div>

```

.div {
  width: 500px;
  height: 500px;
  display: flex;
}
.div-left {
  width: 50%;
  height: 100%;
}
.div-right {
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
}
.div-right-top, .div-right-bottom {
  height: 50%;
}

大盒子里弹性左右布局，右边盒子弹性上下布局吧

这样子?

img