問題タブ [flexbox]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
237 参照

css - フレックスボックスでこれを行う方法はありますか?

私のメイン<div>の高さは固定されていますが、それを使用しようとすると、オーバーフロー ハックがあっても、box-orient: horizontalすべて最初の の上にとどまります。<div>

私は立ち往生しています。これは私が必要なものです:

例

そしてこのコード:

0 投票する
12 に答える
992958 参照

css - Flexbox の子を親の 100% の高さにするにはどうすればよいですか?

Flexbox 内のフレックス アイテムの垂直方向のスペースを埋めようとしています。

そして、ここにJSFiddleがあります

flex-2-child次の 2 つの場合を除いて、必要な高さを満たしていません。

  1. flex-2高さは 100% です (これは、フレックス アイテムのデフォルトが 100% であるため奇妙です + Chrome ではバグがあります)
  2. flex-2-child不便でもある絶対的な地位を持っている

これは現在、Chrome または Firefox では機能しません。

0 投票する
2 に答える
7554 参照

css - -webkit-box-flexプロパティがこれで機能しないのはなぜですか?

私はウェブサイトを作成していて、いくつかのボタンを作成し、それらに-webkit-box-flexプロパティを追加しました。それはうまくいきました。ただし、ボタンの1つにドロップダウンメニューを追加すると、-webkit-box-flexプロパティがボタンに適用されなくなり、機能しなくなります。誰かが何が起こっているのか教えてもらえますか?

これがjsfiddleです:

http://jsfiddle.net/hGT6E/

ありがとう!

0 投票する
2 に答える
2412 参照

flexbox - CSS3の「フレックスボックス」レイアウトは、両方向の余分なスペースを吸収できますか?

「flex」プロパティにより、フレックスアイテムが一方向の余分なスペースを吸収できることはわかっています(「flex-direction」の値が「row」の場合、行の余分なスペースは吸収されます)。

しかし、これらのアイテムをラップするとどうなりますか? 2 行目の項目は、2 行目の余分なスペースを吸収するだけです。ただし、縦方向のスペースがあったとしても吸収しません。

たぶん、デモはあなたが私をより明確に理解できるようにするかもしれません.

item2の直後にitem5ができるといいのですが。マージン以外に余分なスペースはありません。

誰かがそれを理解するのを手伝ってくれますか?

0 投票する
1 に答える
4257 参照

css - CSS flexbox の中央揃え - 絶対位置が使用されている場合の Firefox のバグ?

中央のフレックスボックスアイテムで絶対位置を使用すると、この問題が発生します。Firefox では動作しません。

ここにリンクがあります。

HTML

CSS

divで絶対位置を使用する必要があるため、どうすればこれを修正できますか?

0 投票する
1 に答える
1314 参照

css - この CSS3 を改善し、同じ効果を達成する - フレックスボックスの垂直方向のテキストの整列

新しいcss3テクニックのいくつかを使用して垂直ナビゲーションメニューを作成しようとしていますが、これまでのところ、目的の外観に最も近いdisplay:table. display:table/table-row/table-cell主に「セル」をテーブル形式に制限するため (たとえば、「行」または「セル」に余白を設けることはできません)、またdivs、垂直にリストします。私がもともとこの方向に進んだ理由はvertical-align: middle、テキストに使用することでした。フレックスボックスメソッドを使用しようとすると、両方のテキスト行が同じ行に配置され続け、それらを分割する方法がわかりませんでした。

同じ外観をより柔軟に、できれば余分な div なしで実現するのを手伝ってもらえますか?

メソッドの実例display: table(完全に中央に配置されているようには見えません):http://jsfiddle.net/jKRDQ/

フレックスボックス方式を使用して最も近いもの: http://jsfiddle.net/4wSN5/

CSS3 なしで最も近い: http://jsfiddle.net/6gRcp/

0 投票する
0 に答える
843 参照

css - フレックスボックス アイテムを複数の行に均等に配置するにはどうすればよいですか?

すべてのボタンが nav 要素 (コンテナー) の中央に均等に配置されたメニュー バーに取り組んでいます。サイズに関係なく、ほとんどのデバイスで見栄えを良くするには、このレイアウトが必要です。問題は、私がテストしているタブレット サイズの 1 つで、ボタンの 1 つだけが次の行に移動し、望ましくない外観が残ることです。css を使用して、すべてのアイテムをすべての行に均等に分散させる方法はありますか?

ナビゲーションのスタイル ブロックは次のとおりです。

0 投票する
1 に答える
2535 参照

css - フレックス要素内でテキストを垂直方向に中央揃えするにはどうすればよいですか?

フレックスボックス (または他の純粋な CSS) を使用して、要素内のテキストを垂直方向に中央揃えする特別な方法はありますか?

フィドル: http://jsfiddle.net/WK_of_Angmar/JZZWg/

0 投票する
1 に答える
933 参照

css - 負の相対ポジショニングFirefoxクローム互換性

FirefoxとChromeの負の相対位置が異なる理由がわかりません。また、Flexboxが最新で機能するかどうかもわかりません。 例えば

Firefoxで動作します:

Chromeでは以下で動作します:

デモ:

http://jsfiddle.net/3fJqZ/48/