如何在父级伸缩行div的末尾显示子div，并在父级div的开始处显示另外两个div？

Question

如何在行flex父级的开始处显示两个div容器，在结尾处显示第三个容器？在以下示例中，child-3应该位于右侧。

这是一个快速示例，其中所有cildren在父级的开头：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

只需添加 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>