問題タブ [flexbox]

シナリオ：div#wrapper次のcssを持つ要素があります。

このラッパーには<section>、わかりやすくするためにセクションA、B、Cと呼ぶ3つの子要素が含まれています。そのため、次のようなものが残ります。

美しい。ここに問題があります：私は現在メディアクエリに取り組んでおり、800px未満のときにこのレイアウトを変更する必要があります。具体的には、セクションBをセクションAとCの下に移動して、全幅にする必要があります。説明に役立つグラフィックを次に示します。

質問：1つの子要素をその柔軟なボックスから切り離して、この方法でレイアウトを変更することは可能ですか？

私のグーグルにもかかわらず、複数行のフレックスボックスを実装する方法の例はほとんど見つかりませんでした。例から得たコードはどれも機能しませんでした。フレックスボックス内に 3 つの要素があり、最初の要素を一番上に、2 番目と 3 番目の要素を一番下の行に配置します。

これらのプロパティを使用してみました：

幅を設定しても、最初の要素の幅が 100% であっても折り返されません。特定のベンダー プレフィックスが不足していますか、それとも構文が間違っていますか?

私は次のリストを持っています：

スタイル付き

親コンテナが800pxx600pxの固定サイズであると仮定して、コンテンツを垂直方向に流し、次に水平方向に流して、最終的なレイアウトが次のようになるようにします。

（webkit）フレックスボックスでこれを達成するにはどうすればよいですか？3番目のリストアイテムが親コンテナの一番下に到達すると、リストアイテムをフローさせることができないようです。リスト内の項目数は不定ですので、横スクロールをお願いします。

ビューポートを垂直方向に次のように塗りつぶしたいと思います。

http://codepen.io/anon/pen/lkpKu

ただし、height: 100%外部divに適用することは、が存在する限り機能しませんdisplay: flex。

これは以下から分岐しました：

http://codepen.io/chriscoyier/pen/qazmI

ビューポートを水平方向に埋めるのに問題はありません。

これを達成する方法はありますか？私はハックを見ることにオープンですが、理想的には、Javascriptを使用して同じ効果を手動で実装する必要はありません（私はその方法を知っていて、質問していません）。

これを最新のChromeで動作させることに興味があります。

不明な幅 (動的幅) の div がいくつかあります。これらの div をブラウザの幅に合わせて自動サイズ変更するにはどうすればよいですか?

たとえば、幅が異なる5 divがあります。ブラウザーの幅が 3 つの div しか埋められない場合、それらの 3 つの div はブラウザーの幅に合わせて自動的にサイズ変更され、残りは 2 行目に表示されます。

html5 と css3 を使用してどのように作成できますか。css3 に新しい機能の flexbox があることは知っていますが、それを処理できるかどうかはわかりません。

クライアントの解像度に応じてラップする CSS で柔軟なレイアウトを作成しようとしています。

たとえば、横向き (幅 1024px) の iPad では、次のように表示したいと考えています。

しかし、縦向き (幅 600px) のプレイブックでは、次のように表示したいと思います。

20px の余白を除いて、ほとんどすべてが機能しています。ラップされた要素のマージンを指定する方法がわかりません。

これが私のコードです：

HTML:

CSS:

コードは、ブラウザーが有効な Webkit ブラウザーであることを前提としています。

助けていただければ幸いです。お時間をいただきありがとうございます。

MAJ : コードペンの追加 : http://codepen.io/anon/pen/srGwq

非常に特定のプロジェクトでフレックスボックスを扱い始めました。ドキュメントは何度も頻繁に変更されたため、私は自分の問題に対処していません。

ここに私のhtmlがあります:

そして私のcss（可能性のための接頭辞なし）：

したがって、結果は次のとおりです。

メディア クエリでは、box-ordinal-group と box-orient を変更して、モバイルでこの結果を取得します。

問題は、次のように、.left と .right をタブレットの左の 1 列に垂直に配置する必要があることです。

.left と .right を box-ordinal-group:1 に設定し、.middle を box-ordinal-group:2 に設定しようとしましたが、その結果、.left と .right が左側に水平に配置され、それらを垂直に並べます。

Flexboxのことはよくわからないので、経験者大歓迎です。多分それは不可能です。

ありがとう、悪いスキーマで申し訳ありませんが、まだ画像を投稿する機会がありませんでした.

これには Flexbox が必要になるのではないかと疑っていますが (または単に簡単に使用できるようになるかもしれません)、誰かがアイデア/回避策を持っているかもしれません。私はこのような構造を持っています:

セクションは幅: 100%。最初の div (左にフローティング) をテキストに応じてさまざまな幅に拡大し、2 番目の div がセクションの残りのパーセンテージを取るようにします。各 div には、おそらく内部に浮かぶさまざまな他の div が含まれます (そして、それらは幅にパーセンテージを使用します)。これは可能ですか？

編集:わかりました、より大きな問題は、2 番目の div に % 幅のフローティング div があるという事実だと思いますが、その親は幅の自​​動です...それでうまくいきませんか? コデペン

サンプルはhttp://jsfiddle.net/GGYtM/にあります。要求されたインライン コードは次のとおりです。

Firefox では、「ルート」の div 要素は親要素の幅に合わせて大きくなりませんが、コンテンツに合わせて必要なスペースを占有します - これは完璧です。ただし、Chrome と Safari では、「ルート」の div 要素が大きくなり、親コンテナーの幅全体を占有します。この違いの理由は何ですか？理想的には FF の動作を実現したいのですが、完璧です。

css3フレキシブルボックスレイアウトモデルを最新のChromeで動作させるのに問題があります。例：

（これのjsfiddle）

上記の例では、すべての要素が主軸で正しく伸び、divとスパンも交差軸で正しく伸びていますが、入力領域とテキスト領域は交差軸で正しく伸びていません。仕様によると、そうすべきです。

私は回避策を探しているのではなく、私が間違っていることや、これが機能しない原因となる仕様に欠けていることがあるかどうかを知りたいと思っています。