How to display child div on the end of parent flex row div and another two divs on the start of parent div?

Question

How is it possible to display two div containers on the start of a row flex parent and the third one at the end? child-3 should be on the right side in the example below.

Here is a quick sample with all cildren on the start of the parent: jsfiddle

.parent {
  height: 50px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

.child-1,
.child-2,
.child-3 {
  margin: 2px 1px;
  padding: 2px;
  border: 1px solid blue;
}

.child-1 {}

.child-2 {}

.child-3 {}

<div class="parent">
  <div class="child-1">
    child-1
  </div>
  <div class="child-2">
    child-2
  </div>
  <div class="child-3">
    child-3
  </div>
</div>

Answer 1

just add margin-left: auto;

.parent {
    height: 50px;
    width: 100%;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
}

.child-1,
.child-2,
.child-3 {
    margin: 2px 1px;
    padding: 2px;
    border: 1px solid blue;
}

.child-1 {}

.child-2 {}

.child-3 {
    margin-left: auto;    /* new line added */
}

<div class="parent">
  <div class="child-1">
   child-1
  </div>
  <div class="child-2">
   child-2
  </div>
  <div class="child-3">
   child-3
  </div>
 </div>

Answer 2

Wrap the first two elements in a div and the third one in a different div.

Give parent div justify-content: space-between.

Do the same with the new wrapping divs. (Make sure they are also display: flex;)

Check fiddle https://jsfiddle.net/jt6p4a30/2/

Your html should be

<div class="parent">
  <div class="subparent">
  <div class="child-1">
    child-1
  </div>
  <div class="child-2">
    child-2
  </div>
  </div>
  <div class="subparent">
  <div class="child-3">
    child-3
  </div>
  </div>
</div>

and CSS:

.parent {
  height: 50px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.subparent {
  display: flex;
  justify-content: space-between;
}