問題タブ [flexbox]

私はChromeでcss3のフレックスボックスで遊んでいます（これについてはクロスブラウザについて心配する必要はありません）。コンテンツを好きなようにレイアウトするように説得するのに苦労しています。これが私の目標のスケッチです：

これが私の試みのjsFiddleです：http：//jsfiddle.net/Yht4V/2/これ.groupは、それぞれが複数の列を作成するのではなく、高さを拡張することを除いて、うまく機能しているようです。

ここではフレックスボックスを広く使用しています。divがページの残りの高さを占めるように、bodyレイアウトは垂直に配置されます。#contentそれぞれ.groupが水平に配置されています。最後に、それぞれがラッピングで垂直に.item配置されます。.group

残念ながら、高さ.groupを拡張すると、それぞれが1つの列#contentになり、垂直スクロールバー（不要）が発生します。それぞれの高さを.group固定ピクセルサイズに設定すると、アイテムは複数の列に分割されますが、これはフレックスボックスの流動性を損ないます。高さが固定されている場合の外観は次のとおりです。http：//jsfiddle.net/Yht4V/3/

#contentでは、固定の高さを設定せずにすべてがフレックスボックスで管理されているため、divを垂直方向に拡張しないようにするにはどうすればよいですか？フレックスボックスが親の高さを拡張してスクロールバーを表示するのではなく、より多くの列をトリガーすることを期待していました。

私が所有して運営しているサイトのこのページデザインをご覧ください。

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

ご覧のとおり、これは従来の2列のレイアウトに関係しています。物事の順序は重要です。たとえば、写真のすぐ横に、これが関係する種を確認できます。

現在、このサイトのレスポンシブデザインをコーディングしており、課題に直面しています。狭いスマートフォンのビューポートでそのページを想像してみてください。古典的な戦略は、右の列を左の列の下に単純に「スタック」し、ユーザーが垂直方向にスクロールできるようにすることです。ただし、これは要素の順序に関しては理想からはほど遠いものです。「種」ブロックは写真のずっと下にあり、ユーザーは写真と種の関係を確認する前に、まずコメントなどをスクロールする必要があります。

私はそれを解決しようとしていますが、CSSのフレックスボックスを可能な解決策として説明しているこの記事は非常に有望に聞こえました：

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

ここでの考え方は、CSSのみを使用して、要素の視覚的な順序を、まさに私が必要としているものに変更できるということです。残念ながら、それ以来、この記事では古い仕様が使用されており、新しい仕様はどのブラウザでもほとんどサポートされていないことを知りました。

http://css-tricks.com/old-flexbox-and-new-flexbox/

この種は私にとってそれを台無しにします。それでも、概念レベルで質問したいと思います。

フレックスボックスに関して私が見たすべてのデモには、次のような単純なマークアップがあります。

次に、コンテナは垂直方向のフレックスボックスであると宣言されます。そして最後に、各子要素に順序が割り当てられます。これにより、たとえば、単一のCSSステートメントを使用してchild2をchild1の上に移動できます。

ここに質問があります。追加の階層が機能しているという意味で、実際のマークアップがより複雑な場合はどうなりますか？例：

ご覧のとおり、このマークアップには追加の階層があり、並べ替えられる実際のコンテンツブロックは、最上位のコンテナの直接の子要素ではありません。彼らは子供ですが、直接の子供ではありません。

フレックスボックスと子要素の並べ替えは、このようなシナリオで機能しますか？たとえば、「content5」を「content1」と「content2」の間に移動できますか？

ブラウザのサポートが不十分であるにもかかわらず、私はそれがサポートされるかどうかを概念的に理解しようとしています。私が尋ねる理由は、追加の列階層はマークアップで非常に一般的であり、フレックスボックスの並べ替えが直接の子でのみ機能する場合は完全にダメだからです。

HTML 5のドラッグアンドドロップについて学び、このチュートリアルに従います。

http://html5doctor.com/native-drag-and-drop/

私はそれを機能させていますが、私の最終的な意図は、あるdivから別のdivに画像をドラッグアンドドロップできる小さなページを作成することであるため、ドラッグした要素のIDを取得し、その要素の.appendChildを、画像をドロップできるdivに追加します。

正常に動作しますが、Chrome（OSX上）に再描画のバグがあるようです。3つの画像の1つをドロップターゲットにドラッグするとすぐに追加されますが、そのゴーストは元のdivに残っているためです。ページをスクロールするだけで消える場合もあれば、消えない場合もあります。

オリジン/ターゲットをフレックスボックスにするCSSを削除すると、正常に動作し、ゴースティングは発生しません。

以下は私のhtml/css / jsですが、ここでもフィドルに入れています：http: //jsfiddle.net/3JznW/

この問題は私のコードが原因で発生していますか？それともこれはChromeのバグですか？

私はこの素晴らしいCSSFlexboxデモページで遊んだことがあり、ほとんどの概念を理解していますが、仕事で見ることができませんでしたflex-shrink。そこで適用する設定が何であれ、ページに違いは見られません。

スペックから：

<'flex-grow'>

このコンポーネントは、「flex-grow」をロングハンドで設定し、フレックス成長係数を指定します。これは、正の空き領域が分散されたときに、フレックスコンテナ内の残りのフレックスアイテムと比較してフレックスアイテムがどれだけ成長するかを決定します。省略した場合は「1」になります。

<'flex-shrink'>

このコンポーネントは、「flex-shrink」をロングハンドで設定し、フレックス収縮係数を指定します。これは、負の空き領域が分散されたときに、フレックスコンテナ内の残りのフレックスアイテムに対してフレックスアイテムがどれだけ収縮するかを決定します。省略した場合は「1」になります。負のスペースを分散する場合、フレックス収縮係数はフレックスベースで乗算されます。

どのような状況flex-shrinkで適用されますか（つまり、ネガティブスペースが分散されている場合）？フレックスボックス要素の幅とその中の要素の（最小）幅を設定してオーバーフローを作成するカスタムページを試しましたが、説明されているケースではないようです。

すでにサポートされていますか？

解決策として、リンクされたデモのオプションのセット、またはJSFiddleのようなライブデモのいずれかが高く評価されます。

新しいレイアウトを開始し、最新のテクノロジーを使用してサイトを構築したいと思います。新しいサイトを構築するための最良の方法は何ですか？

これらは私が使用することを考えていたものです：

• メディアクエリ+アドビリージョン+フレックスボックス
• メディアクエリ+CSSグリッド（Microsoftから）+ Flexbox
• メディアクエリ+フレックスボックス

プロジェクトを始める前に良いアドバイスを聞きたいです。ありがとう！

3 つの子を持つフレックスボックス要素があります。

最初の 2 つの子をボックスの上部に揃えたいのですが、3 番目の子については垂直方向の中央に配置したいと考えています。私はそれを機能させることができないようです。これが私が試したことです：

ここにjsfiddleがあります：

http://jsfiddle.net/TDUd5/15/

何か提案はありますか？

私は Microsoft Virtual Academy からいくつかのビデオを作成しており、css3の -ms-flexまたはいわゆるFlexbox に出くわしました。

html5とcss3で Web アプリを実装したいのですが、この-ms-flexは非常に役立ちます。

これは、モバイル デバイスのWebkitまたはfennecベースのブラウザーで利用できますか? 利用できる場合、利用制限はありますか？また、サポートされていない場合、それらのブラウザに相当するものはありますか?

私はそれを見つけました：safariにはwebkit-boxがあり、残りのブラウザ（Opera、Chrome、MozillaまたはDolphin）には他にもあるかもしれません

IE と chrome でうまく動作するこのシンプルな Web サイトがありますが、firefox では少しファンキーです。黄色の長方形である div と、その上にある同じ色のナビゲーション バーがありますが、何らかの理由で、firefox はナビゲーションを div のすぐ下に移動します。ここに私が持っているコードがあります:

次のCSSを使用：

modernizr のように (実際にはそうではありません)、「古いブラウザー」(ポリフィル) のフレックスボックスを有効にする JavaScript ライブラリを探しています。

はい、これは本当に新しい機能であることは知っています (事実、「存在しない」というのは有効な答えです)。しかし、私はこのようなことを望んでいます。私は常に水平方向と垂直方向のセンタリングに苦労しています。作品。

私はこのフレックスボックスを意味します: http://weblog.bocoup.com/dive-into-flexbox/ (最新)

私は 2 つの流体 div を並べて配置しようとして います。これは、現在の外観のプレビューhttp://jsfiddle.net/238ha/です。私がやろうとしているのは、2つのdivがあることです

これが現在のコードです

これが私が達成しようとしていることです

画像: 画面の 25% を占める

コンテンツ: 画面の 75% を占める

ただし、ユーザーが画面のサイズを変更すると、div が大きくなる可能性がありますが、小さくできる量には制限があります。フレックスボックスについて読んだことがありますが、うまくいくかもしれないと思いますが、それでもまだうまくサポートされておらず、「flex-flow:row」をうまく使用できていません。私もこのサイトでブートストラップをたくさん使っています。