Flex的框水平位置

Question

我有N個的div高達N = 5，和我有另一個DIV名爲X

我想在一個柔性的div容器水平對齊彼此相鄰的N個的div。 但是無論有多少個N div，都必須將X div推到flex容器的右側。

例如

N N    X 
N N N   X 

我能做到這一點與浮動左，一些尺寸，但我發現使用Flex丟失。我可以將X div放在最後N個div旁邊，但不能放在右側，就好像總是固定在那個位置。

Answer 1

保證金左：汽車施加到X

.container { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.n, 
 
.x { 
 
    width: 15%; 
 
} 
 

 
.x { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
    <div class="n">N</div> 
 
    <div class="n">N</div> 
 
    <div class="n">N</div> 
 
    <div class="x">X</div> 
 
</div>