0

この質問によると、Chrome の開発者は変わりました

display: -webkit-boxにdisplay: -webkit-flexbox

ただし、今テストすると (v25.0.1364)、再び変更されていることがわかり、次のようになります。

古い実装と新しい実装

私たちは再び負けdisplay:-webkit-flexて-webkit-flex-direction:column支配します。
(黒いフォントは該当しないことを意味します)

したがって、とにかく機能するように防弾ルールを書きたいと思います。しかし、私がこのようなものを書くと：

<div id="box_container" class="horz_new horz_old"> <div>

いくつかのプロパティと、ルール間で競合を引き起こすwebkit-boxいくつかのプロパティを受け入れるため、再び失敗します。-webkit-flex

必要なものをすべて含めて、 jsfiddleを準備しました。

誰でもこれについて私を助けることができますか? それとも、フロート div に戻すべきでしょうか?

4

1 に答える 1

1

古い-webkit-box-*プロパティは、その上にあるコンテナーにのみ適用されます (適切です) display: -webkit-box。display: flex問題の多い新しい ( ) と古い flexbox ( )を混在させることができるはずですdisplay: box。両方を一緒に使用することに関する素晴らしい記事は次のとおりです: http://css-tricks.com/using-flexbox/

すべてが機能するようにいくつかの変更を加えて、フィドル ( http://jsfiddle.net/UjZF9/1/ ) を更新しました。基本的：

  • -webkit-flex-direction: row;水平レイアウト (デフォルト) および-webkit-flex-direction: column;垂直レイアウト用。
  • stretchjustify-contentプロパティの可能な値ではありません。可能な値については、 https://developer.mozilla.org/en-US/docs/CSS/justify-contentを参照してください。
  • あなたの子供に が必要でした-webkit-flex:1( に似ています-webkit-box-flex:1)。

http://www.htmlfivecan.com/#11でプレイ可能なデモがいくつかあり、さまざまなフレックスボックス プロパティがレイアウトをどのように変更するかを確認できます。試してみる。

于 2013-03-11T18:29:15.673 に答える