スクロールフレックスコンテナはアイテム

Question

を中心に収まらない

HTML：

<div id="container"> 
    <div class="item">Foo</div> 
    <div class="item">Bar</div> 
</div> 

CSS：

#container { 
    display: flex; 
    justify-content: center; 
    overflow: auto; 
} 
.item { 
    flex-grow: 1; 
    min-width: 200px; 
    max-width: 300px; 
} 

上記コンテナ未満400ピクセルに縮小し、水平スクロールバー期待通りに表示されます。ただし、最初の項目は、左端までスクロールしても、コンテナの左端で部分的に不明瞭になります。コンテナが縮小するにつれて、より多くのアイテムが不明瞭になります。

デモ：http://jsfiddle.net/FTKcQ/。観察する結果フレームのサイズを変更します。 Chrome 30とFirefox 24でテストされました。

centerがcenterから他の値（たとえばspace-between）に変更された場合、すべてのコンテンツがスクロールして表示されます。中心に置かれたアイテムの動作が異なるのはなぜですか？

ここでの目標は、中央に配置されたアイテムの行を作成することです。各アイテムは、ある範囲の幅の間で幅が拡大します。コンテナがすべての最小幅の項目に収まらない場合は、スクロールしてすべての項目を表示する必要があります。

Answer 1

を、この動作は今のところ期待されている：

フレキシボックスの配向性は、CSS内の他のセンタリング方法とは異なり、「真」のセンタリングを行います。これは、フレックスアイテムが、フレックスコンテナをオーバーフローしても、中央にとどまることを意味します。ただし、コンテンツがある場合でも、ページの上端または左端を超えてオーバーフローすると、問題が発生することがあります。将来のリリースでは、整列プロパティは "安全な"オプションを持つように拡張されます。

今のところ問題がある場合は、マージンを使用してセンタリングを行うことができます。これらのマージンは「安全な」方法で応答し、オーバーフローした場合にセンタリングを停止します。 alignプロパティを使用する代わりに、中央に配置するflexアイテムに自動余白を設定するだけです。正当性プロパティの代わりに、フレックスコンテナの最初と最後のフレックスアイテムの外側のエッジに自動マージンを設定します。

したがって、整列のためのマージンを使用して、期待される結果を得ることができます。最初の項目にはmargin-left: autoを追加し、最後にはmargin-right:autoを追加してください。

私のデモ：http://jsfiddle.net/WFxQk/

Answer 2

スタイルシート

 
    #container { 
     background-color: green; 
     display: flex; 
     /* justify-content: center */ ; 
     align-items: center; 
     overflow: auto; 
    } 
    .item { 
     background-color: white; 
     border: 1px solid black; 
     flex-grow: 1; 
     flex-shrink: 1; 
     flex-basis: auto; 
     min-width: 200px; 
     max-width: 300px; 
     margin: auto; 
    } 

てみてください私は、デフォルト flex-startにそれを作る、 justify-contentを削除しました。そして、 margin:autoが追加されています。

デモ更新：MDN (Flex item considerations)によるとhttp://jsfiddle.net/FTKcQ/1/