web-dev-qa-db-ja.com

FlexboxおよびNEWER flexbox apiを使用したフルハイトアプリでの垂直スクロール

フレックスボックスを使用してフルハイトアプリを使用したい。このリンクで古いflexbox（表示：ボックス、その他）を使用して欲しいものを見つけました： CSS3 Flexboxフルハイトアプリとオーバーフロー

これは、古いバージョンのflexbox cssプロパティの正しいソリューションです。

新しいflexboxプロパティを使用したい場合は、同じリンクで2番目のソリューションを使用しようとしますが、flexboxusing高さのあるコンテナ：0px;垂直スクロールを表示します。

それは他の問題を導入し、解決策よりも回避策であるため、あまり好きではありません。

基本的な例を使用してjsfiddleを準備しました： http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

これは「フルハイトhtml Web」であり、コンテンツ要素のflexboxのためにフッターが下部にあります。 CSSコードと結果の間でバーを移動して、異なる高さをシミュレートすることをお勧めします。

htmlcsshtml5css3flexbox
71
José Cabo

https://stackoverflow.com/users/1652962/cimmanon のおかげで、答えが得られました。

解決策は、垂直スクロール可能要素に高さを設定することです。例えば：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

min-heightが必要な場合を除き、flexboxは再計算するため、要素willには高さがあり、 height：100px;次とまったく同じ：min-height：100px;

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

したがって、垂直スクロールにmin-heightが必要な場合の最適なソリューション：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

記事を表示するのに十分なスペースがない場合に、垂直スクロールを完全にしたい場合：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

最終コード： http://jsfiddle.net/ch7n6/867/

152
José Cabo

Flexbox仕様エディターはこちら。

これはflexboxの使用を推奨しますが、最適な動作を得るために微調整する必要があることがいくつかあります。

  • プレフィックスを使用しないでください。接頭辞なしのflexboxは、ほとんどのブラウザーで十分にサポートされています。常に接頭辞なしで開始し、それをサポートする必要がある場合にのみ接頭辞を追加します。

  • ヘッダーとフッターはフレックスするものではないため、両方にflex: none;を設定する必要があります。現時点では、いくつかの重複する効果のために同様の動作がありますが、後で誤って混乱させたくない限り、それに依存するべきではありません。 （デフォルトはflex:0 1 autoであるため、自動高さから開始して縮小できますが、デフォルトではoverflow:visibleであり、デフォルトのmin-height:autoをトリガーして、縮小しないようにします。overflowを設定した場合、 min-height:autoの動作が変更され（min-contentではなくゼロに切り替わります）、余分な高さの<article>要素によって突然押しつぶされます。

  • <article>flexも単純化できます-flex: 1;を設定するだけで準備完了です。 https://drafts.c​​sswg.org/css-flexbox/#flex-common の一般的な値に固執するようにしてください呼び出したい動作のほとんどを読んでカバーします。

54
Xanthir

現在の仕様では、flex: 1 1 autoに関して次のように記述されています。

width/heightプロパティに基づいてアイテムのサイズを調整しますが、それらを完全に柔軟にし、メイン軸に沿った空きスペースを吸収します。すべてのアイテムがflex: auto、flex: initial、またはflex: noneの場合、アイテムのサイズが設定された後のプラスの空き領域は、flex: autoのアイテムに均等に配分されます。

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

要素の高さが100pxだと言ったら、絶対サイズではなく「推奨サイズ」のように扱われます。縮小および拡大が許可されているため、許可されているだけのスペースを占有します。そのため、この行を「メイン」要素に追加すると、height: 0（またはその他の小さな数字）が機能します。

20
cimmanon