flex布局下实现图示样式

Question

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

Answer 1

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

<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;
}