問題タブ [flexbox]

フレックスボックスをネストできますか? 水平フレックスボックスに水平フレックスボックスを入れ子にし、垂直フレックスボックスに垂直フレックスボックスを入れ子にしました。クロムでは水平方向の水平方向のみが機能し、Firefox ではどちらも機能しません!

ここで jsfiddle を作成しました: http://jsfiddle.net/NpkTL/1/

しかし、ここにhtmlがあります：

および CSS:

左が#A、右が#Bです。#A と #A2-container は垂直フレックスボックスで、#B と #B2-container は水平フレックスボックスです。さまざまな div の色を設定し、各レベル (垂直の幅と垂直の高さ) でそれらを縮小して、何が起こっているかを簡単に確認できるようにしました。左側 (クロム!) では問題ないように見えますが、右側では、#B2a が #B2 (オレンジ色の部分) を垂直方向に埋める必要があります。

この例では、中央の行/列に 3 のフレックスを持つ 1 つのフレックスボックスを使用する方が簡単ですが、コンテンツを #A2 に相当するものに動的にロードしていますが、これもフレックスボックスです。

Flexboxを使用して、WebKit ブラウザーで同じ高さの列を実現しています。

私はこのCSSを使用しています...

...そしてこの HTML...

...を生成する...

jsFiddle .

ご覧のとおり、3 つの要素は、最も背の高い兄弟 (最初のli) の高さです。

最も高い要素を削除すると、他の要素が次に高い要素の高さになるリフローが発生することが予想されます。

私が期待したこと...

実際どうなったんだ…

興味深いことに、Web Inspector で要素の検査を開始すると、問題は自動的に修正されます。おそらく、ブラウザーの再描画を明示的にトリガーすることで、この自己修正を再現できますが、CSS で 100% 処理する必要があるものに JavaScript を導入する必要はありません。

兄弟要素が削除されたときにFlexboxに縮小/再計算するように指示する方法はありますか?

フレキシブルボックスレイアウトモジュールの仕様が変更され、一部のブラウザでは複数のバージョンが実装されていることを知っています（異なる構文を使用）。情報を探していましたが、古くなっているという警告のあるチュートリアルしか見つかりません。

仕様が再び変更される可能性があることはわかっていますが、通常とは異なるユースケース（Chrome拡張機能）があり、現在の形式で使用したいと考えています。Chromeに実装されている最新バージョンの使用方法を知りたいだけです。

最新のチュートリアルを知っている人はいますか？

ボックスを動的に作成するレイアウトにフレックスボックスプロパティを使用したかったのです。

だから私はカウントごとに自分自身（ボックス）を調整したい. ボックスが 1 つしかない場合のように、完全に 100% のスペースが必要で、最大 3 つのボックスが 1 列に配置されます。4 番目のボックスが画面に表示されると、自動的に次の行に移動します。

flex-flow についてよく検索しましたが、適切な解決策が見つかりませんでした。

助けてください。

よろしく

フレックスボックスからアイテムを削除すると、残りのアイテムはアニメーションではなく、新しい位置にすぐに「スナップ」します。

概念的には、アイテムの位置が変化しているため、トランジションが適用されると思います。

関連するすべての要素（フレックスボックスと子）に遷移プロパティを設定しました

フレックスボックスへの編集 (追加と削除) をアニメーション化する方法はありますか? これは実際には私にとってショーストッパーであり、フレックスボックスに欠けている部分の 1 つです。

HTML/CSS を使用して、記事の 2 つのフレックスボックス レイアウト (y 軸で上下に配置) を使用して Windows 8 アプリを実装しようとしていますoverflow-x: scroll。z-indexただし、記事のプロパティを使用して、他のフレックスボックス コンテナーをオーバーレイして、記事の拡大ビューを画面全体に表示したいと考えています。しかし、それは機能していません。これは IE10/Win 8 専用ではないと思います。webkit flexbox プロパティを持つ jsFiddle で動作しないため、CSS のどこかに問題があると思います。

例については、このjsFiddleを参照してください。ご覧のとおり、expanded記事はまだ他のフレックスボックス コンテナーの下にあります。

何か助けてください。私はこれをしばらく探していましたが、問題の根本を見つけることができません。

さて、jqueryで「slideUp」と「slideDown」機能を再現しようとしていますが、フレックスボックスが表示に使用されている場合です。

これは私が得た距離です（現在、上記のコードは機能しますが、「none」から「-webkit-flex」に切り替えてもスライドしません。次のことを試しました）

これは単に機能しない、アニメーション化しない、エラーなどしない...

奇妙なことに、これを行っているのは、すべてのオブジェクト（「設定」クラスの要素）でページを開始する場合、display flexとしてロードし、次にそれらを非表示にするためです。

クリックして[設定]セクションを下にスライドすると、フレックスボックスが適用されないようですが、別のページに移動して、動作が正しくなったときに戻ってきました...非常に奇妙です！

奇妙なことに、フィドラーで再作成することはできません.... http://jsfiddle.net/FzqA7/ ..

次のレイアウトがあると仮定しましょう（下の画像を参照）...上部にヘッダー（A）、常に下部にあるフッター（C）、およびコンテナ（B）が中央にあり、ヘッダーとフッターの間のスペースを 100% にします。

純粋なcssを使用してこれを達成する方法は考えられません。どんなアイデアでも大歓迎です！

Firefox で flexbox が動作するようになりましたが、webkit ブラウザーでは display:box div の背景が失われます。
オンラインテストはこちら:
http://www.angeloalpaca.railsperu.com/html/

以下は簡単な例です。フローティング フレックスボックス div(webkit) で背景が消えることを確認してください:
http://www.angeloalpaca.railsperu.com/html/simple.html

HTML:

スタイル

スタイル 960 グリッド

重複の可能性:
display:box と display:flexbox の違いは何ですか?

ここでcss3flex-box デモを読みました。親要素のスタイルは次のとおりです。

を に変更するdisplay: -webkit-flexbox;とdisplay: -webkit-box;、ページ レイアウトが変更されました。

購入 についてのチュートリアルを読みました-webkit-flexboxが-webkit-box、構文は同じです。それは本当ですか? それらの間にいくつかの違いはありますか？