如何在父flx行div的末尾显示子div，在父div的开头显示另外两个div？[复制]

Question

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

下面是一个包含所有孩子的快速示例，位于父项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 {}

html lang-html prettyprint-override"><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

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

给父div对齐内容：间距。

对新的包装div做同样的事情。（确保它们也是显示：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;
}

Answer 2

只需添加左边距：自动

css prettyprint-override">.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>