8

Mozilla自身のドキュメントによると：

Firefox は単一行のフレックスボックスのみをサポートします。

ただし、フレックスボックスは最新のすべてのブラウザーでほとんどサポートされているため、フレックスボックスの使用を開始したいと考えています(幸運にも、このプロジェクトで IE 9 をターゲットにする必要はありません)。

Firefox は単一行のフレックスボックスしかサポートしていないため、それを使用することで得られる唯一の利点はjustify-content、おそらくalign-items. 私の意見では、フレックスボックスの真の力はflex-flowとflex-wrapであり、レスポンシブ レイアウトを可能にします。

実際、Holy Grail Layout の例を Mozilla のドキュメントからコピーして Firefox で開いてみましたが、そこでも正しく動作しませんでした。はorder変更されましたが、flex-flow.

関連する質問: Flexbox がフレックス アイテムをラップしない

私のターゲット ユーザーのほとんどは、iOS 用の Internet Explorer、Firefox、および Safari を使用していると確信しています。Firefox で目的の動作を得るために使用できるポリフィルはありますか、または Modernizr を使用してfloats、widths、およびclear修正にフォールバックする必要がありますか (もしそうなら、Modernizr で何を探すべきですか?)

4

3 に答える 3

13

ポリフィルはもう必要ありません。Firefox 28以降では修正されています。こちらflex-wrap: wrapの回答も参照してください。

古いブラウザーの修正: 「flexbox で解決」のデモでは、Philip Walton は単純な CSS ポリフィルを使用しています:@supports not (flex-wrap: wrap)は、サポートされていないブラウザーのみを対象flex-wrap: wrapとしており、私が理解している限り:display: inline-blockが代わりに使用されています。

于 2013-12-22T11:28:25.343 に答える
-1

flex-direction:column;の代わりに使用できますflex-flow:column;。Mozillas Holy Grail のエラーのようですhttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example

于 2013-11-22T00:47:47.843 に答える