html - 使用 Flex 尝试根据图像获取框

Question

我正在使用 flex 属性。我想要 1. 左边的框和 2.&3.向右。

.flex{
display:flex;
flex-wrap:wrap;
width:400px;
}
.flex > div{
flex: 0 0 50%;
}
.flex .one{
order:1;
background: red;
}
.flex .two{
order:2;
background: green;
}
.flex .three{
order:3;
background: blue;
flex:0 0 50%;
}

<div class="flex">
	<div class="one">1</div>
    <div class="three">3</div>
    <div class="two">2</div>
</div>

我试过了，但无法按照所附图片获取。

Answer 1

使用justify-content: flex-end(将flex元素沿flex轴对齐，flex行是水平的) -direction) - 请参见下面的演示:

.flex {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  justify-content: flex-end; /* added */
}

.flex>div {
  flex: 0 0 50%;
}

.flex .one {
  order: 1;
  background: red;
}

.flex .two {
  order: 2;
  background: green;
}

.flex .three {
  order: 3;
  background: blue;
  flex: 0 0 50%;
}

<div class="flex">
  <div class="one">1</div>
  <div class="three">3</div>
  <div class="two">2</div>
</div>