問題タブ [flexbox]

2 つの div 要素が並んでいます。それらの高さを同じにして、いずれかのサイズが変更されても同じままにしたいと思います。テキストが配置されたために一方が大きくなった場合、もう一方は高さに合わせて大きくなるはずです。私はこれを理解することはできません。何か案は？

親 div の幅になるように画像のサイズを変更しようとしています。通常は正常にwidth: 100%;動作しますが、親にdisplay: box;img がある場合、サイズは変更されません。子イメージを与えbox-flex: 1ても効果はありません。

コンボボックスを用意して、初期値を設定したい。ただし、ユーザーがクリックして、初期値とは異なるオプションのドロップダウンリストを表示できるようにしたいのです。

私が考えているのは、Googleマップの公共交通機関の方向性です。右端のコンボボックスでは、現在の時刻に初期値が設定されていることがわかります。ただし、ユーザーは引き続き矢印をクリックして、初期値とは異なる値のドロップダウンリストを表示できます。

FlexBoxを見てきましたが、初期値を設定すると、その初期値のみがドロップダウンリストに表示されます。このデモ＃7でそれを見ることができます。

必要なことを実行するようにFlexBoxを構成する方法はありますか？または、使用できる別のコンボボックスはありますか？GoogleはGoogleマップのコンボボックスに何を使用していますか？

ありがとう。

コースのリストのオートコンプリート ソリューションとして Flexbox を実装しました。DB から取得したコースの完全なリストを適切な JSON 形式で渡しただけです。入力時に一致するリストを絞り込んでくれるという印象を受けましたが、代わりに、リスト全体を出力し、一致する文字を強調表示するだけです。

入力時に結果を動的に絞り込むために、独自のサーバー側スクリプトを作成する必要がありますか? ドキュメントには、「「results.aspx」を呼び出すすべての例で、データは105個の英単語のリストです」と具体的に記載されているため、リストを渡すだけで十分だと思いました。

誰の入力にも感謝します。私のコードは以下の通りです：

今日、FF4でフレキシブルボックスモデルを使用しているときに、を使用してドキュメント内のコンテナを中央に配置できないことに気付きましたmargin: 0 auto;。

このコンテナを中央に配置する方法を知っている人はいますか？Webkitでは、期待どおりに機能します。

状況を想像してみてください

divがあり、コンテナ内には3つのdivがあります。

また、内部のdivを自己適応させる必要がある場合もあります。

このような

css：

html：

but a-1 ,a-2 , a-3 do not self-adaption .i mean a-1 a-2 a-3 do not equal in length. it seems also depends on the text length.

how solve?

新しい css3 flexbox モデルを使用してレイアウトを作成しようとしています。高さの 100% を占めるページが必要で、固定フッターとヘッダーを使用し、残りのコンテンツは中央の列にあります。コンテンツ列は、固定された最大幅まで幅の 100% を占有する必要があります。また、すべてを中央に揃える必要があります。

このデモの仕様どおりに正確にビルドすることができました。これは、クロムまたは Webkit ベースのブラウザーでうまく機能します。しかし、「max-width」プロパティを追加すると、すべてが左に揃えられた固定列になります。

これがFirefoxで機能しない理由を教えてもらえますか? 仕様の異なる解釈ですか、それとも私のコードのエラーですか?

これはデモの HTML です。

これはCSSです：

css3 flex-boxのプロポーションを試した後、ChromeとFirefoxのいくつかの違いにすぐに気づきました。

特に、フレックスする必要のある要素に幅を設定すると、Firefoxは必要に応じて要素をフレックスします。幅のスタイルが考慮されますが、変数のみです。

Chromeはwithスタイルを完全に尊重します。

例：

ボックス内の2つのdivに同じ幅が割り当てられている場合、クロムはそれらを同じサイズにします。Firefoxは、2番目のdivがより多くのスペースを必要とすることを再認識し、したがって、より多くの割り当てが行われます。

誰が正しいですか？

これが私のコードのフィドルです：http：//jsfiddle.net/kizu/GCahV/（Firefoxと他の最新のブラウザで比較してください）

私が達成したいこと：

1. float左と右の2つの部分からなるインラインブロック（または少なくともを含むブロック）が必要です。
2. これらのパーツは並べて配置する必要があり、柔軟性が必要です。右側のパーツはまったく存在しない可能性があります。
3. 親ブロックにはいくつかmax-width（in%またはfixed in px）が必要です。
4. 左側が十分に大きい場合はオーバーフローする必要がありますが、右側は常に表示する必要があります。

を使用してinline-block、最新のChrome、Safari、Operaでうまく機能するようにしましたが、Firefoxにはバグがあることに気付きました。右側が長いと、左側が縮小します。floatoverflow: hidden

私が見つけた唯一のCSS回避策は、フレックスボックスモデルでFxの位置要素を試すことですが、それは完璧ではありません。親に持たせることができませんでしたmax-width（またはwidthまったくできませんでした）。

これが私のこれまでの最善の試みです：http：//jsfiddle.net/kizu/GCahV/1/

したがって、質問は次のとおりです。

1. max-widthFirefoxに理解させる方法はあり.b-shrinkerますか？
2. このFirefoxのバグに対する他のCSSのみの回避策、または私が望むことを行うための完全に異なる方法はありますか？

4x4 フレックスボックス グリッドを作成しようとしています。4 つのボックスのそれぞれの垂直方向の高さは同じにする必要がありますが、1 行につき 2 つを左から右に積み重ねます。これは可能ですか？

(ブラウザのサイズを 960 から 640 の間で変更して、私の試みを確認してください: http://www.joshuasortino.com/index-newまたは、どのように動作するかを確認してください: http://www.joshuasortino.com/index )

編集: この効果は、2 つのコンテナー (行ごとに 1 つ) を作成することで可能になりますが、1 つのラッパー/コンテナーのみを使用することをお勧めします。