如何显示父div的父结点上的父div的div和父div的另一个两个div的开始？

Question

如何在一行flex父母的开始处显示两个div容器并在末尾显示第三个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"> 
 
\t \t <div class="child-1"> 
 
\t \t \t child-1 
 
\t \t </div> 
 
\t \t <div class="child-2"> 
 
\t \t \t child-2 
 
\t \t </div> 
 
\t \t <div class="child-3"> 
 
\t \t \t child-3 
 
\t \t </div> 
 
\t </div>

Answer 2

包裹在一个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; 
}