フレックスボックス水平位置

Question

IはN = 5までのdivのN数を有する、私は別の私が互いに隣フレックスDIV容器Nのdiv要素に水平に整列する

X命名DIVました。 しかし、X divは、そこにいくつのN個のdivがあっても、フレックスコンテナの右側に常にプッシュされなければなりません。例えば

N N    X 
N N N   X 

私は左フロートといくつかのサイズでこれを行うことができますが、私はFlexで迷子になっています。最後のN divの次の位置にX 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>