CSS：Flexboxの正当化コンテンツを右にオーバーフローさせるようにする

Question

1つのコンテナdivに動的な番号のdivをdisplay: flexとしています。

ここで、私の子divを中央に揃えたいので、justify-content: centerを使用します。 これはjustify-content: centerを設定し、子どもの数が少ない（青い四角形）

のためではなく、子どもたちの大きな量のために完璧に動作は、子のdivは遠くと遠くオフスクリーン（赤の長方形）に押されていることを意味します。

右にスクロールしている子供は、右にスクロールして右端の子供を見ることができるので、まだ表示されています。

しかし、左にスクロールできないため、左にスクロールした子どもは表示されません。これは問題だ。

だから、基本的に、私はその子を中心が左に画面外に押されるから子供を防ぐためにflexboxを使用したいです。その代わりに、コンテンツは右にオーバーフローする必要があります。つまり、justify-content: flux-startが動作しますが、それでも中央に配置されます。

Answer 1

ネストされたフレックスコンテナを使用し、内側のフレックスコンテナにmargin-left: autoとmargin-right: autoを設定するだけです。自動余白は、配布するための空き領域がある場合にのみ機能するため、これが機能します。デモ：

.flex { 
 
    display: flex; 
 
} 
 

 
.inner-flex { 
 
    display: flex; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
/* just styles for demo */ 
 
.flex__item { 
 
    background-color: tomato; 
 
    color: white; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}

<div class="flex"> 
 
    <div class="inner-flex"> 
 
    <div class="flex__item">One</div> 
 
    <div class="flex__item">Two</div> 
 
    <div class="flex__item">Three</div> 
 
    <div class="flex__item">Four</div> 
 
    <div class="flex__item">Five</div> 
 
    <div class="flex__item">Six</div> 
 
    <div class="flex__item">Seven</div> 
 
    </div> 
 
</div>

ここでは、テストのサイズ変更にjsFiddleです。