問題タブ [flexbox]

Google Chrome でフレックスボックスを使用して (このブラウザーのみをサポートする必要があります)、動的レイアウトを作成します。1 つの div 要素に n 個の子要素があり、スペース全体を同じ比率で共有する必要があります。新しく導入されたフレックスボックスにより、これは問題なく機能しています。しかし、各内部 div の高さを 0 に設定する必要もありました。この div 内の要素を高さ 100% に引き伸ばしたい場合は、計算された値ではなく、指定された値 0 を使用します。javascript の使用を防ぐためにフレックスボックスを選択したので、そのままにしておくことをお勧めします。画像の高さを div に合わせる他の方法はありますか?

コードは次のとおりです (Google Chrome でのみテスト済み)。

html

CSS

ブラウザで監視するコード

CSS フレキシブル ボックス レイアウト モジュールが書き直されておりdisplay:box、廃止されてdisplay:flexbox.

display:flexbox現在、どのブラウザー (リリース、ベータ、ナイトリー) でもサポートされていますか? フレックスボックスの新機能、フレックスボックスと古いモジュールの違い、および/または古いモジュールが書き直された理由に関する情報がどこにあるか知っている人はいますか?

私は絶対配置されたdivを持っていますdisplay: box

Chrome では問題なく動作し、div の子は水平方向に整列しますが、Firefox では動作しないようです。

を削除するposition: absoluteと、両方のブラウザーで正常に動作しますが、必要です。

例: http://dabblet.com/gist/1716069

以下のような従来のメールのようなレイアウトを使用するアプリがあります。

新しい CSS3 フレックスボックス モデルを使用して構築しましたが、ユーザーがフォルダー ボックスに新しいアイテムを動的に追加する機能を追加するまで、見事に機能します。フォルダボックスにスペースが残っている限り、その下のタスクボックスに成長し始めないようにフレックスボックスが機能することを願っていました。残念ながら、これは私が見ているものではありません(Chrome 17)。

問題を示すJSFiddle hereを作成しました。[フォルダーの追加] リンクをクリックするだけで、新しい子を収容するのに十分なスペースが残っていても、フォルダー ボックスが大きくなります。

質問に。1 つが利用可能な高さの 3 分の 2 ( box-flex 2 ) を占め、もう 1 つが 3 分の 1 ( box-flex 1 )を占め、そのような方法でそれを行うように、flexbox を使用して 2 つの垂直に配置されたボックスを構築するにはどうすればよいですか?新しいコンテンツが最初のボックスに追加されたとき、スペースがなくなるまで拡張を開始しません。

シンプルなサイドバーをアーカイブしてみた | 通常のフロートで視覚的にコンテンツを表示し、( など) を使用して同じ高さの列に古典的な手法を使用しましたmargin-bottom: -99999px; padding-bottom: 99999pxが、それが気に入らず、あちこちで問題が発生したため、フレックスボックスを使用することにしました。試してみました少し前に固定サイズの幅で問題なく動作しましたが、現在はパーセンテージ幅になっているため、firefox はまったく気に入らなかったようです...

この例は、フレックスボックスが通常どのように機能することを期待しているかを示しており、サファリとクロムでは問題なく動作しましたが、Firefox はパーセンテージ幅を無視するだけです...これは、Firefoxの既知の問題であることがわかりましたが、古い問題であり、私は考えました彼らはすでにそれを解決しました...

次に、Firefox をだますために何か別のことを試してみましたが、コンテンツに基づいてページごとにサイドバーのサイズが異なるため、期待したものではありませんでした...

そのため、柔軟なレイアウトのフレックスボックスをあきらめて、自分のニーズに合ったもっとシンプルなものを使用することになります...

しかし、誰かがこの問題を何らかの回避策で解決するのか、それとも私たち全員が mozilla によって修正されるのを待っているのか知りたいです...

ありがとう！

Firefoxで、A幅/高さが固定されたdivBがあり、幅と高さが100％に設定された子divがある場合、他の祖先のB場合、計算された幅は0になります（したがって表示されません）。Aof Bhas display: box（または適切なベンダープレフィックスバージョン）が設定されています。

HTMLの例：

CSSの例：

Firefoxでは緑色のボックスが表示されますが、Chromeでは赤色のボックスが表示されます。

これは、この例を表示するためのフィドルです。これは、ネストされたdivの別のレイヤーを持つ別のフィドルであり、問​​題の要素の直接の親でなくても、これが発生することを示していますdisplay: box。

width: 100%Bの宣言で、Bを親と同じサイズにするように強制したいと思います（つまり、Chromeでの動作）。幅が0と計算されるのはなぜですか？

ビューポート全体を埋め、コンテンツが長すぎる場合にスクロールする内部セクションを持つ柔軟なボックスレイアウトを作成しようとしています。ただし、内側のコンテンツは、小さな領域内に座ってスクロールするのではなく、レイアウト全体を拡大しています。

詳細については、ここにデモを設定しています：http: //jsbin.com/ezazig（Firefoxのみ）

これheight: 100%;は問題ではありません.layout。500pxの固定の高さを指定しても、それは無視されます。

問題が何であるかについて何か考えはありますか？

SINGLE 子要素を許可する flexbox div があります。これまでのところ、垂直方向のストレッチを含め、子の位置合わせ (上、左、右、下など) を適切に行うことができました。また、垂直方向と同時に水平方向のストレッチをサポートできるようにしたいと考えています (「同時に」が鍵のようです)。

子要素の 'flex' プロパティを '1 100%' に設定することで水平方向のストレッチを実現できましたが、これは親要素に適用されたパディングを無視するように見えます (およびそのために子ノードに適用されたマージンは無視されます)。案件）。

フレックスボックスの仕様を見ると、フレックスボックスの主軸に沿ってこれを行う他の方法を見つけることができません。横軸ストレッチも問題ありません。

おはようございます、

display: -webkit-box要素を別の要素内にネストするとdisplay: -webkit-box、その要素をフレキシブル ボックスとして適切に含めることができません。下の画像の削除ボタンの後ろにあるテキストを参照してください。

LI HTML:

LI CSS (美学は省略):

ビューポートの幅が変化しても .reference が柔軟であることが重要です。

この問題は .reference を削除することで解決できますdisplay: -webkit-box;が、これは .reference 内の要素にフレキシブル ボックス モデルを使用できず、項目番号 (1.、2. など) を独自の列に保持する必要があることを意味します。

どんな助けでも大歓迎です。敬具。

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

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

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

および CSS:

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

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