問題タブ [flexbox]

私がこのHTMLコードを持っているとすると：

そしてCSS：

アンカーが水平方向に中央に配置されるようにスタイルを設定するにはどうすればよいですか？

css で初めてフレックス ボックス モデルを使用しています。Chrome と Safari ではすべてが適切にレンダリングされますが、Firefox は大混乱です。また、IE でテストする PC をまだ入手していません。フレックス ボックス モデルに正しいプロパティを使用していますか? http://www.emilydiane.net/ebbg/styles.cssで私のスタイル シートを参照してください。

ありがとう ：）

「古い」フレックスボックスの実装を使用-webkit-box-align: start;して、列が同じ長さになるのを防ぐために使用します。

新しい仕様（ https://developer.mozilla.org/en/Using_flexbox）でこれを行う方法がわかりません。

私のメインのdivはで、div内<div role="main">に2つ<section class="app">並んでいます。

Chromeをバージョン21に更新しました。flexプロパティを使用していくつかのcssスタイルを定義しました。

しかし、新しいバージョンのchromeではその効果がすべて失われていることがわかったので、次のように変更してみます。

ヘッド3のプロパティが正しく変更されました。最後のプロパティ-webkit-flex-directionは以前のようには機能しませんが、開発ツールがプロパティが正しいことを示すクロム

デモはここにあります、私はプロパティを使用してh1列で注文します

この問題を解決するにはどうすればよいですか？または、プロパティを追加する必要がありますか？

リストについては、次のレイアウトを念頭に置いています。各リスト項目は2つの列で表されます。2番目の列は使用可能なすべてのスペースを占める必要がありますが、最初の列があまりにも多くのスペースを占める場合は、最小サイズで右側に固定する必要があります。最初の列には省略記号が表示されます。

その最後のケースで問題が発生しています。最初の列が多すぎるテキストで構成されている場合、省略記号を表示する代わりに、フレックスボックスから伸びて水平スクロールバーが表示され、2番目の列は右側に固定されません。

このようにレンダリングしてもらいたい（モックアップ）：

どうすればそれを達成できますか？

これは サンプルフィドルです。

display: -webkit-flex;デザインを新しいフレックスボックス仕様 (ではなく)に移行しようとしていdisplay: webkit-box;ます。overflow: auto;オーバーフローしているコンテナに明示的な高さを設定しない限り、プロパティは無視されているようですが。

作業例:

古い仕様での実装

新仕様での実装

何か間違ったことをしていますか、それともこの新しい仕様はまだ完全には完成していませんか?

css3 flexboxモジュールを使用して、ストレッチできるテーブル列を作成しようとしていますが、デフォルトの幅と、最小幅と最大幅があります。

これは、ビューポートが各列の最小幅を保持するのに十分な幅である場合にうまく機能しますが、ビューポートが縮小すると、すべての列が折りたたまれます。フレックスボックスの最小幅/幅が常に維持されるようにするための良い方法はありますか、または「フレックス」できるテーブル列を持つ他の方法はありますか。これまでのところ、これはChrome21でのみテストしました。

CSS：

HTML：

Windows 8ストアアプリで水平方向に柔軟な画面を作成しようとしています。いくつかのグループが水平方向に伸びており（外側のFlexboxに含まれています）、グループの下のさまざまなフィールドが垂直方向にリストされ、必要に応じて画面の下から上に折り返されます。 （一連の内部フレックスボックスに含まれています）。これは、グループ化されたWindows 8 ListViewに似たレイアウトですが、単一のデータアイテムに関連するフィールドを表示しており、特定のセクションにページの他の場所にListViewが含まれるため、リストビューを使用してデータを表示できません。

内側のフレックスボックスセクションが新しい列に折り返されるたびに問題が発生しました。折り返しフレックスボックスの後に配置されたフレックスボックスは、前のセクションの列幅ではなく、1列幅離れて表示されます。これは、次のスクリーンショットに示されています。

私が考えていたものとはまったく異なります！以下のようになります（オーバーフローのあるセクションに手動でマージンを設定して作成します）。

このページのHTMLは次のとおりです。

そしてCSSに関しては：

私が持っているフレックスボックスのセットアップで2番目の写真で私が目指していたものを達成する方法はありますか？そうでない場合は、ページ上のコンテンツを必要な範囲で水平方向に実行できるようにする別の方法はありますか？グリッドビューのように流動的で柔軟なアプリにしたいのですが、先ほど申し上げたように、それを使用することはできません。

定期的にスタックする必要がある 3 つのブロック要素のリストがあります。スタックの 2 番目の要素はボックス要素です。

問題はこのボックス要素にあります。これは、それ自体の上に奇妙な不要なマージンを追加するためです。次のリンクhttp://jsfiddle.net/frapontillo/ghA5X/で確認できます。

Chrome での正しい動作:

Firefox/Aurora での間違った動作:

何が原因でしょうか? Chrome は問題なく動作しますが、Firefox (リリース チャネル) と Aurora にはこの問題があります。

コンテンツをレンダリングした後、フレックスボックスの正確な幅を取得するのに問題があります。私はWindows 8アプリケーションに取り組んでいます（ie10特定のものを意味します）。

コードは次のとおりです:
[HTML]

[CSS]

[JAVASCRIPT]

スクロールバーがあるので、幅が違うと思っていました。外側のコンテナの幅は400px、中間のものは継承widthさheightれoverflow: auto、最も内側は拡張可能です。フレックスボックスには、それぞれ幅と高さを持つ 8 つの項目があります100px。だから私はフレックスボックスの幅を期待していました900px (i.e. 100px*8 + margin-left and margin-right for each item)が、それでも400px親の寸法だけを取得しています。何か不足していますか？

JS Fiddle へのリンクは次のとおりです: http://jsfiddle.net/pdMSR/ [ie10 でのみ開く]