如何在父 flex row div 的末尾显示子 div，在父 div 的开头显示另外两个 div?

Question

如何在行 flex 父项的开头显示两个div 容器，在末尾显示第三个容器？ 在下面的示例中，子项 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>

Answer 2

将前两个元素包装在一个div中，将第三个元素包装在不同的div中。

给父divjustify-content: space-between.

对新的包装div执行相同的操作。 (确保它们也是display: flex;的(

检查小提琴 https://jsfiddle.net/jt6p4a30/2/

你的 html 应该是

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

和 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;
}