問題タブ [flexbox]

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

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

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

お役に立てば幸いです。パラメータは次のとおりです。

• 動的な幅と高さを持つ1つの親コンテナ
• 可変数の子
• 親の高さは、ウィンドウサイズに応じてJSで設定されます
• 親の高さが崩壊するにつれて、その幅は子供に応じて拡大する必要があります
• 子供は最初に容器を垂直に、次に水平に充填する必要があります
• 子は親の直接の子孫である必要があります。行と列にネストボックスや追加の構造を使用することはできません。
• 子供は均一なサイズです
• 子供は比較的配置されている必要があり、JSでその位置を計算することはできません
• JSは親の高さ/幅のみを設定できます

HTML

ボックスモデル

高さの収縮後のボックスモデル

これはCSS/CSS3ボックスモデルで可能ですか？

ありがとう！！

Chrome のインスペクターで、div「navbox」のフレックスボックス プロパティの横に黄色の警告アイコンが表示されます。残念ながら、Google には黄色のアイコンに関するツールチップや説明がありません。そのため、display: box プロパティを拒否する理由について推測するしかありません。ここで何が問題なのですか？

SafariまたはChromeで、次にFirefoxでこのjsFiddleを見てください：http：//jsfiddle.net/brandondurham/LRJhm/

Webkitでの外観：http：//cloud.smallparade.com/B4TE

Firefoxでの外観：http：//cloud.smallparade.com/B53R

Firefoxではフレキシブルボックスが壊れていることがわかります。2つのボックスの長い方（.left）では、cssプロパティwhite-spaceがに設定されてnowrapいます。これは、折り返したくないためです。.leftこの単一のプロパティにより、柔軟なボックスが壊れて拡張され、 divのコンテンツ全体に適合します。

他の誰かがこの振る舞いを見ましたか？修正がありますか？

いわばフロントエンドのないオフラインアプリやサービスという意味でのアプリ開発者で、HTMLなどを久しぶりに見ました。

しかし、HTML5 の新機能には実際に興味を持ちました。今のところ、webkit-box や moz-box などを使用する必要があるという意味で、Flex-box は一様にサポートされていないことがわかりました。

しかし、ブログの場合は、デザインの変更を検討し始めるかもしれないと考えました。

しかし、次のような 2 x 2 のレイアウトを作成する方法がよくわかりません。

• 左上: 高さ固定、動的幅
• 右上: 高さ固定、幅固定
• ボタン左: 動的な高さ、動的な幅。
• ボタン右: 動的高さ、固定幅
• 左上からボタン右にかけてロゴが重なっています。
• ボックス間の小さな境界線。

ボックスの下部の動的な高さは必須ではありません。それらが整列している限り、コンテンツはそれらを埋める可能性が最も高いです。

しかし、新しい施設でこのレイアウトを作成するにはどうすればよいでしょうか?

編集：私は結局これをあきらめました。

jQueryでこれを行うにはどうすればよいですか：http：//jsfiddle.net/tdskate/C4nAG/

利用可能な垂直方向のスペースがいくら残っていても、高さを自動的に調整するdivが必要です。

で計算して$('body > *').height()から要素の高さを差し引いてみましたが、一部の要素に上マージンまたは下マージンがある場合は正しく計算されません。

また、ブラウザウィンドウのサイズが変更されたときにサイズを変更する必要があります...

私のフレックスボックスの 2 つの子には、それぞれbox-flex: 1. 私の理解では、それらの幅は互いに等しくなければなりません(両方とも親フレックスボックスの合計幅の50%を占めます)。しかし、コンテンツが子に追加されると、その幅が変化します (コンテンツとパディングによって異なります)。なぜこれが起こるのですか？

CSS:

HTML:

かなり複雑なWebアプリをHTML/CSSで動作させることに直面しています。私はフレックスボックスで多くの問題を見つけています。それは私の問題を解決するようです。私は自分が間違っていることやフレックスボックスの制限が何であるかを理解しようとしています。私はChromeでのみ作業しているので、それが役に立ちます。

私は2つの問題を見続けています：-ボックスは、中に含まれる子供の高さ/幅に対応する方法を理解していません-子ボックスは、親によって含まれていません。この問題の画像：

ここにコードを投稿する代わりに、JSFiddleがあります：http：//jsfiddle.net/dex3703/ryCQq/完全 ではありませんが、私が望むアイデアを得ることができます。CSSは3つの異なるファイルから結合されます。

ありがとう！

Firefox（バージョン8.0）では、要素をandに指定するdisplay: -moz-boxとmargin: auto、その要素は親要素の中央に配置されなくなります。Chromeで動作します。これはFirefoxの問題ですか、それとも何か足りないものがありますか？どうすればこの問題を解決できますか？

回避策の1つは、ラッパーdiv要素を追加してそれdisplayをとして設定することblockですが、これは醜いです。

新聞・雑誌の記事のように浮かぶレイアウトを目指しています。これは、 jQueryのMasonryが行うことと似ています。しかし、私はCSS3のみを使用してそれを達成しようとしていました。おそらくboxdisplayプロパティでそれができると思いました。何度か試してみましたが、親の列幅が満たされていると、アイテムを下にスライドさせることができませんでした。

CSSのみを使用してこのレイアウトを実現する方法はありますか？

マークアップは次のようになります。

ここでは、セクションは左にフロートし、列キューでより適切に調整されます（単純なフロートのように、前のセクションのベースラインを下回らないようにします）。