問題タブ [flexbox]

これは、新しいフレキシブル ボックス レイアウト モデルに関する質問です。

Iのコンテナ内にdisplay: flex;2 つのアイテムがあるとします。コンテナーの幅が十分に広い場合、両方のアイテムが水平に配置されます。そうでない場合、フレックスボックスのレイアウト メカニズムにより、アイテムが垂直に積み重ねられます。私が望むのは、アイテムが隣り合っているときに両方のアイテムの間に内側のマージンを持たせることですが、アイテムを積み重ねる必要がある場合は、このマージンを消したいと思います。

これは FlexBox モデルで可能ですか?

例として、最近のバージョンの Chrome でテストされた次のドキュメントを使用できます。

外側の div に十分な水平スペースがある場合、「One」と「Two」が隙間なく並べて表示されます。ブラウザ ウィンドウを縮小するとすぐに、両方が垂直に積み重なって表示されます。両方の段落が隣り合っている間、両方の段落を余白で区切っておきたいと思います。

http://jsfiddle.net/WHYS2/

この jsFiddleを見て、唯一のボタンを押してリストを埋めてください。ご覧のとおりDIV、リスト内の要素は、含まれる親を埋めるためにサイズ変更されます。このコードは、私がやりたいことを正確に実行しますが、これを実装する方法は、一見単純なタスクには複雑すぎると思います。内部要素に高さを割り当てるアルゴリズムのコードは次のとおりです。

私の質問は、私たちができる最善のことですか? 適切なクロスブラウザー互換性を備えたこの機能を実現する方法が他にありますか? 新しい Firefox、Chrome、および Safari のみをサポートする必要があります。ここでフレックスボックスについて読んで、その有望な仕様を調べていましたが、フレックスボックスがブラウザー間で一貫して重み付けされた柔軟なレイアウトを実行できるようには見えません。私が間違っている場合は、これを達成する方法の簡単な例を教えてください。

このタイプの重み付けされた柔軟な線形レイアウトは珍しくありません。たとえば、レイアウト オプションの 1 つとして Android SDK で使用できます。要素に割り当てられた重み値を基準にして、要素のサイズを変更して親コンテナーを埋める推奨される方法は何ですか? 可能であれば、純粋な CSS ソリューションは素晴らしいでしょう。

私は最新のフレキシブル ボックス仕様 (現在、私の知る限り、最新の Chrome でのみサポートされています) を使用しており、フレックス アイテムが最大高さを超えないようにしようとしています。

例で最もよく説明されています: http://jsbin.com/efedof/2/edit

最初の例.content(および 2 つの.bar要素) は の高さを超えていない300pxため、正しいです。しかし、2 番目の例では、テキストがdiv.contentの外側の下部を押し下げています。.box

3 つの結合されたフレックス アイテムの最大合計高さを強制して、.content領域が の外側に伸びて の外側に.box押し出さ.barれるのではなく、スクロール可能になるようにするにはどうすればよい.boxですか?

ありがとう。

これまでのところ、縦のボックスに 3 つの列が配置されています (まだ画像を投稿できないため、ここにリンクがあります): http://imgur.com/4Y34c

CSS

問題は、青いボックスを 3 番目の列の下部に揃える方法がわからないことです。すべての配置プロパティを試しましたが、何か間違っているに違いありません。何か案は？？？

内部に同様のいくつかの要素を持つ水平フレックスボックスがあります。項目間のタブ移動を有効にするために、それぞれが でラップされます。埋め込み Webkit を使用しているため、達成しようとしている効果を確認するには Chrome が必要です。

アイテム間をタブで移動することはできますが、アイテムが画面の右側に離れすぎている場合は、そのアイテムをタブで表示したいと考えています。しかし、そうではありません。サンプルコードはここで見ることができます:

http://jsfiddle.net/sRGWS/

これを使用するもの：

以下にフィドルを作成しました。最初のドロップダウンメニューは、フレキシブルボックスレイアウトを使用しています。フロートで構成されている下の2番目のメニューを置き換えようとしていました。

Afaikフローティングコンテンツは、通常の「フロー」からそれを引き出します。そのため、フロートされた例の方が見栄えが良くなります。私の目標は、柔軟なボックスレイアウトを使用して、フロートナビゲーションに似たものを実現することです。メニューにカーソルを合わせたときにコンテンツが押し下げられたくない。浮いた例のように重ねて欲しいです。肝心なのは、ホバーされたメニューの高さ全体を含むようにFlexコンテナを拡張したくないということだと思います。

どうすればこれを達成できますか？これに関するご意見ありがとうございます。

http://jsfiddle.net/hRKgV/

Webkit構文を追加しただけですが、フィドルはすべての主要なブラウザーで機能するようです（フィドルがどのように機能するかによると思われます）。

それが他の誰か（私は疑わしい）を助けるなら、これを追加することによってほとんど達成することができます：

もちろん、この新しいモデルを試してみる理由は、他の回避策を使用する必要がないためです。これが私が達成したいことを理解するのに役立つことを願っています。

新しいフレックスボックスレイアウトのみを使用して、pinterestまたはjQuery組積造と同じタイプのデザインレイアウトを取得できるかどうかを知りたいと考えました。これが私が得た限りです：

PHPループを使用して12個のアイテムを作成しているHTML

Flexiejs.comにはCSSフレックスボックス用のブラウザポリフィルがありますが、これはこのトピックに関する以前のドラフトに基づいており、現在のW3C候補推奨CSSフレキシブルボックスレイアウトモジュールと互換性がありません。CRで定義されているフレックスボックスのポリフィルは、少なくとも部分的にありますか？

私は最近、CSS3 フレックス ボックスをいじり始めました。多くのリソースを読み、自分でいじりました。私は見てきました：http://www.w3.org/TR/css3-flexbox/

具体的には、子要素の flex プロパティに問題があります:

負のフレックス パラメータがどのように機能するのか理解できないようです。正のフレックスは、親要素から子要素に比例してスペースを分配するため、理にかなっています。

私が理解していることから、ネガティブフレックスは、要素が親をオーバーフローしたときに要素を縮小することになっています。しかし、私はこれを機能させることができませんでした。理解を助けていただければ幸いです。

これが私がテストしたコードです：http://jsfiddle.net/nxzQQ/2/

HTML:

CSS:

2 つの子フレックス アイテムを含むフレックスボックス ヘッダーがあります。これらのフレックスアイテムには、独自の子があります。

フレックスアイテムの垂直方向の配置をオーバーライドして、子が下に配置されるようにする方法はありますか?