15

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;
}

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

デモ: http://jsfiddle.net/FTKcQ/。結果フレームのサイズを変更して観察します。Chrome 30 および Firefox 24 でテスト済み。

を から他の値 (例: )にjustify-content変更すると、すべてのコンテンツがスクロールして表示されます。中央揃えのアイテムの動作が異なるのはなぜですか?centerspace-between

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

4

2 に答える 2

26

MDN (フレックス項目に関する考慮事項)によると、現時点では次の動作が想定されています。

Flexbox の配置プロパティは、CSS の他のセンタリング方法とは異なり、「真の」センタリングを行います。つまり、フレックス アイテムがフレックス コンテナーからはみ出しても、フレックス アイテムは中央に配置されたままになります。ただし、コンテンツがページの上端または左端を超えてはみ出すと、問題が発生することがあります。コンテンツがある場合でも、その領域までスクロールできないためです。将来のリリースでは、配置プロパティが拡張され、「安全な」オプションも追加される予定です。

今のところ、これが懸念される場合は、代わりにマージンを使用してセンタリングを実現できます。マージンは「安全な」方法で応答し、オーバーフローした場合はセンタリングを停止するためです。align- プロパティを使用する代わりに、中央揃えにしたいフレックス アイテムに自動マージンを設定します。justify- プロパティの代わりに、フレックス コンテナー内の最初と最後のフレックス アイテムの外側の端に自動マージンを配置します。

したがって、アライメントのマージンを使用して、期待される結果を得ることができます。margin-left: auto最初のアイテムとmargin-right:auto最後のアイテムに追加するだけです。

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

于 2014-07-10T13:49:18.320 に答える
6

スタイルシートで試す 

    ＃容器 {
        背景色: 緑;
        表示: フレックス;
        /* justify-content: center */ ;
        整列項目: センター;
        オーバーフロー: 自動;
    }
    。アイテム {
        背景色: 白;
        境界線: 1 ピクセルの黒一色。
        フレックス成長: 1;
        フレックスシュリンク: 1;
        フレックスベース: 自動;
        最小幅: 200px;
        最大幅: 300px;
        マージン: 自動;
    }
を削除justify-contentし、デフォルトにしましたflex-start。margin:autoそして、センター合わせをしていると思われるものを追加。

更新されたデモ: http://jsfiddle.net/FTKcQ/1/

于 2014-01-14T12:07:26.010 に答える