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

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>