Using Flex trying to get boxes as per images

Question

I am using flex property.I want 1. box to the left and 2.&3. to the right.

.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>

I tried but not able to get as per image attached.

Answer 1

Use justify-content: flex-end (aligns the flex items along the flex axis which is horizontal for row flex-direction) - see demo below:

.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>

Answer 2

You can use margin-left: auto; to push block 3 to the right? Or change the justify-content as mentioned previously - it depends on how you want to go about doing it :)

.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%;
   margin-left: auto; /* update */
}

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