3

css3 flex-boxのプロポーションを試した後、ChromeとFirefoxのいくつかの違いにすぐに気づきました。

特に、フレックスする必要のある要素に幅を設定すると、Firefoxは必要に応じて要素をフレックスします。幅のスタイルが考慮されますが、変数のみです。

Chromeはwithスタイルを完全に尊重します。

例：

<div id="box">
  <div class="flex-box">Test</div>
  <div class="flex-box">Test Text</div>
</div>

ボックス内の2つのdivに同じ幅が割り当てられている場合、クロムはそれらを同じサイズにします。Firefoxは、2番目のdivがより多くのスペースを必要とすることを再認識し、したがって、より多くの割り当てが行われます。

誰が正しいですか？

4

3 に答える 3

3

フレックスは幅には適用されないことに注意してください。最小固有幅が決定された後、空き領域に適用されます。これは、wwwスタイルのメーリングリストで指摘されているように、いくつかの一般的なケースで直感に反する結果を生み出します。CSSの並べ替えや複数行（FirefoxとChromeにはまだ実装されていません）が必要でない限り、使用したいと思うものと、本当に使用したいdisplay: boxものが見つかりました。box-flexdisplay: tabledisplay: table-cell

しかし、実際の質問に戻りましょう。幅をピクセル単位で設定した場合、FirefoxとChromeは同じように表示されますが、幅をパーセンテージで設定した場合はそうではありません。現時点でどのブラウザが正しく実行しているかについては、Firefoxが元の仕様がXULプロパティの機能を記述しているため、元の仕様が意図したものを実装していることは間違いありません。XULプロパティはこれがすべて基づいているものです。他の人が述べているように、最終的な仕様がこの当初の意図と一致するかどうかは不明です。

于 2011-08-25T22:48:53.363 に答える
1

フレックスボックスはまだドラフトとして機能しているので、ブラウザが正しいか間違っているとは思いません。いつでも仕様が変更され、別のブラウザが正しくまたは間違ってレンダリングされる可能性があります。

http://www.w3.org/TR/css3-flexbox/

于 2011-08-25T09:35:55.277 に答える
1

robertcの声明には同意しません。「しかし、実際の質問に戻りましょう。幅をピクセル単位で設定した場合、FirefoxとChromeは同じように表示されますが、幅をパーセンテージで設定した場合は表示されません。」

私は現在、JSおよびCSSサイトでかなり重いものを非常に単純なHTML / CSS3サイトに変換することがいかに簡単であるかを示すために、フレックスボックスを使用しています。結論として、幅をピクセル単位で設定することに関して、次のようになりました。

#main {
  display: box;
}

#main > section {
  width: 120px;
  padding: 10px;
  border: 5px solid #000;
}

クロムでは、合計幅= 120 + 20 + 10 = 150px ffでは、合計幅= 120px（20pxのパディングは120の内側にあり、10pxの境界線も同様です）

私が見つけたもう1つの矛盾は、クロムで、＃mainは貪欲であり、予想どおり100％を占めます。Firefoxでは、期待どおりに機能するために、＃mainを100％に設定する必要があります。

私はまだサポートされているすべてのブラウザのすべての違いを解決するために取り組んでいます。これにさらに追加する必要がある場合は投稿しようと思います。悲しいことに、彼のフレックスボックスモデルと同じくらいクールで、多くのことをするのと同じくらい簡単ですが、一貫性にはほど遠いです。

もう1つ、CSSトランジションを使用して寸法を変更すると、明示的に定義された寸法（ピクセルなど）でうまく機能します...ただし、寸法がボックスのフレックスによって定義されている場合、アニメーションはフレックス値間をジャンプするだけです...スムーズ（ただし、フレックスを5と1にする代わりに、フレックスを500と100にすることができます）。実際、クロムはフレックス値の間でアニメートせず、ジャンプするだけです。一方、FFはこれをうまく行います。

FFがフレックスボックスを処理する方法に物事が進むことを本当に望んでいますが、クロムが近い間、私はいくつかの物事が処理される方法に同意しません、そしてフレックス値の間のアニメーションの欠如はただひどいです。

于 2012-02-04T23:31:34.707 に答える