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

【问题标题】：How to display child div on the end of parent flex row div and another two divs on the start of parent div? [duplicate]如何在父 flex 行 div 的末尾显示子 div，在父 div 的开头显示另外两个 div？ [复制]
【发布时间】：2018-01-25 13:47:10
【问题描述】：

如何在行 flex 父级的开头显示两个 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 {}

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

【问题讨论】：

如果您对孩子 #3 被带出文档流感到满意，您可以简单地将其与 right: 0 绝对定位在同一个父级中。

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

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

给父 div justify-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;
}

【讨论】：