問題タブ [flexbox]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 削除された要素を尊重するようにフレックスボックスを取得するには?
Flexboxを使用して、WebKit ブラウザーで同じ高さの列を実現しています。
私はこのCSSを使用しています...
...そしてこの HTML...
...を生成する...
jsFiddle .
ご覧のとおり、3 つの要素は、最も背の高い兄弟 (最初のli) の高さです。
最も高い要素を削除すると、他の要素が次に高い要素の高さになるリフローが発生することが予想されます。
私が期待したこと...
実際どうなったんだ…
興味深いことに、Web Inspector で要素の検査を開始すると、問題は自動的に修正されます。おそらく、ブラウザーの再描画を明示的にトリガーすることで、この自己修正を再現できますが、CSS で 100% 処理する必要があるものに JavaScript を導入する必要はありません。
兄弟要素が削除されたときにFlexboxに縮小/再計算するように指示する方法はありますか?
css - フレックスボックスモジュールの最新のチュートリアルはありますか？
フレキシブルボックスレイアウトモジュールの仕様が変更され、一部のブラウザでは複数のバージョンが実装されていることを知っています（異なる構文を使用）。情報を探していましたが、古くなっているという警告のあるチュートリアルしか見つかりません。
仕様が再び変更される可能性があることはわかっていますが、通常とは異なるユースケース（Chrome拡張機能）があり、現在の形式で使用したいと考えています。Chromeに実装されている最新バージョンの使用方法を知りたいだけです。
最新のチュートリアルを知っている人はいますか？
css - CSS3 フレックスボックス プロパティ
ボックスを動的に作成するレイアウトにフレックスボックスプロパティを使用したかったのです。
だから私はカウントごとに自分自身（ボックス）を調整したい. ボックスが 1 つしかない場合のように、完全に 100% のスペースが必要で、最大 3 つのボックスが 1 列に配置されます。4 番目のボックスが画面に表示されると、自動的に次の行に移動します。
flex-flow についてよく検索しましたが、適切な解決策が見つかりませんでした。
助けてください。
よろしく
css - Flexbox の挿入と削除をアニメーション化することはできますか?
フレックスボックスからアイテムを削除すると、残りのアイテムはアニメーションではなく、新しい位置にすぐに「スナップ」します。
概念的には、アイテムの位置が変化しているため、トランジションが適用されると思います。
関連するすべての要素（フレックスボックスと子）に遷移プロパティを設定しました
フレックスボックスへの編集 (追加と削除) をアニメーション化する方法はありますか? これは実際には私にとってショーストッパーであり、フレックスボックスに欠けている部分の 1 つです。
html - CSS フレックスボックス、オーバーフロー: スクロール、および z-index に関する問題
HTML/CSS を使用して、記事の 2 つのフレックスボックス レイアウト (y 軸で上下に配置) を使用して Windows 8 アプリを実装しようとしていますoverflow-x: scroll。z-indexただし、記事のプロパティを使用して、他のフレックスボックス コンテナーをオーバーレイして、記事の拡大ビューを画面全体に表示したいと考えています。しかし、それは機能していません。これは IE10/Win 8 専用ではないと思います。webkit flexbox プロパティを持つ jsFiddle で動作しないため、CSS のどこかに問題があると思います。
例については、このjsFiddleを参照してください。ご覧のとおり、expanded記事はまだ他のフレックスボックス コンテナーの下にあります。
何か助けてください。私はこれをしばらく探していましたが、問題の根本を見つけることができません。
jquery - フレックスボックスのslideDownアニメーション
さて、jqueryで「slideUp」と「slideDown」機能を再現しようとしていますが、フレックスボックスが表示に使用されている場合です。
これは私が得た距離です（現在、上記のコードは機能しますが、「none」から「-webkit-flex」に切り替えてもスライドしません。次のことを試しました）
これは単に機能しない、アニメーション化しない、エラーなどしない...
奇妙なことに、これを行っているのは、すべてのオブジェクト（「設定」クラスの要素）でページを開始する場合、display flexとしてロードし、次にそれらを非表示にするためです。
クリックして[設定]セクションを下にスライドすると、フレックスボックスが適用されないようですが、別のページに移動して、動作が正しくなったときに戻ってきました...非常に奇妙です！
奇妙なことに、フィドラーで再作成することはできません.... http://jsfiddle.net/FzqA7/ ..
html - ヘッダーとフッターの間が 100% のコンテンツ
次のレイアウトがあると仮定しましょう（下の画像を参照）...上部にヘッダー（A）、常に下部にあるフッター（C）、およびコンテナ（B）が中央にあり、ヘッダーとフッターの間のスペースを 100% にします。
純粋なcssを使用してこれを達成する方法は考えられません。どんなアイデアでも大歓迎です！
css - CSS3 Flexbox - 960 グリッドの Safari で失敗する
Firefox で flexbox が動作するようになりましたが、webkit ブラウザーでは display:box div の背景が失われます。
オンラインテストはこちら:
http://www.angeloalpaca.railsperu.com/html/
以下は簡単な例です。フローティング フレックスボックス div(webkit) で背景が消えることを確認してください:
http://www.angeloalpaca.railsperu.com/html/simple.html
HTML:
スタイル
スタイル 960 グリッド
css - css3のdisplay:boxとdisplay:flexboxの違いは何ですか?
ここでcss3flex-box デモを読みました。親要素のスタイルは次のとおりです。
を に変更するdisplay: -webkit-flexbox;とdisplay: -webkit-box;、ページ レイアウトが変更されました。
購入 についてのチュートリアルを読みました-webkit-flexboxが-webkit-box、構文は同じです。それは本当ですか? それらの間にいくつかの違いはありますか？
css - CSS3Flexboxレイアウトモジュール-フレックスアイテムの場合はインラインレベルの要素を揃えます
私がこのHTMLコードを持っているとすると：
そしてCSS：
アンカーが水平方向に中央に配置されるようにスタイルを設定するにはどうすればよいですか？