flex布局下实现图示样式

有三个盒子，其中盒子1和盒子2在一行显示，一个左对齐，一个右对齐，盒子3换行显示右对齐。我想用flex布局实现。请问大伙该怎么实现。

img

你这画的怎么还长短不一致呀。

<div class="outer">
   <div class="line1">
      <div style="width:80px;background-color:red">1</div>
      <div style="width:80px;background-color:yellow">2</div>
   </div>
   <div class="line2">
      <div style="width:100px;background-color:green">3</div>
   </div>
</div>

.outer{
display: flex;
flex-direction: column;
width: 200px;
}
.line1{
display: flex;
justify-content: space-between;
}
.line2{
display: flex;
justify-content: flex-end;
}

可以结合html元素布局实现
1、html代码

<body>
    <div class="onebox">
        <div class="onebox-item"></div>
        <div class="onebox-item"></div>
    </div>
    <div class="twobox">
        <div class="twobox-item"></div>
    </div>
</body>

2、css代码

    <style>
        .onebox,
        .twobox{
            display: flex;
            width: 500px;
            margin: 20px 0;
        }
        .onebox{
            justify-content: space-between;
        }
        .twobox{
            flex-direction: row-reverse;
        }
        .onebox-item{
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        .twobox-item{
            width: 250px;
            height: 50px;
            border: 1px solid red;
        }
    </style>

3、效果

img