に質問検索_PHP中国語ウェブサイト

コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

人気の検索：
PHP
MySQL
jquery
HTML
CSS

css - Flex レイアウトに関する質問

フレックスレイアウトに使用するコードは次のとおりです: .cszgroup-ul{ display: flex; justify-content: space-between; flex-wrap: Wrap; margin-top: 15px; padding-bottom: 5px;}.cszgroup- ul li{ width: 31%; margin-bottom: 10px;}結果は...

滿天的星座 2017-06-05 11:13:12

css3 flex 子要素にボーダーを追加した後の問題

親要素を flex に設定すると、子要素 {flex:0 0 33.3333%} は同じ行内で 3 等分できます。ただし、子要素にボーダーを追加した場合は 2 つまでしか配置できません。 Flex は同じ行で伸縮しますが、境界線の幅は計算されません。

漂亮男人 2017-05-16 13:27:46

css - flex レイアウト、display:flex、display:-webkit-box の違い

https://jsfiddle.net/channg/j... boxを使用したdisplay:flexの幅が変わるのはなぜですか? flex:-webkit-box を変更すると、後続のボックスは押し出されますか?

给我你的怀抱 2017-05-27 17:44:17

JavaScript - CSS3 Flex センタリングの問題

justify-content:center を設定すると要素を中央に配置できますが、position:fixed; を追加した後、要素を中央に配置できないのはなぜですか? Flex レイアウトは、fixed を使用した後に有効になりませんか? {コード...}

阿神 2017-06-12 09:20:46

css3 - この例では、CSS フレックスボックスの flex プロパティがこのように設定されているのはなぜですか?

CSS コードの item1 と item2 の次の設定が理解できません。flex:1 2 200px; これら 3 つの値がそれぞれ flex-grow、flex-shrink、flex-basis に対応していることはわかっていますが、この {code ...} を書く目的がわかりません。完全なコードは次のとおりです。html: {code...} css: {code...} 最後にレンダリングされました...

迷茫 2017-06-12 09:24:28

flex が div で指定された幅よりも大きな幅を占めることを示します。

div には特定の幅があり、その中のテキストは API から動的に取得され、省略記号スタイルが付いています。テキストは完全に動的であり、テキストの長さが決定されていないため、テキストの幅を指定することはできません。以下は問題を説明するコードです。 body{background-color:lightblue;}.container{display:flex;width:130px;}.d-flex{display:flex;}.flex-column{flex-direction:colu

P粉425119739 2023-09-11 18:37:38

css - flex を使用して 3 列レイアウトを実装する方法ですが、子要素の高さは適応的である必要がありますか?

flex を使用して図の 3 列のレイアウトを実装したいと考えています。現在、次の問題が発生しています。親要素が display: flex に設定されている場合、3 つの列の高さが同じになり、3 つの列の高さが必要になります。列をアダプティブに設定しようとしましたが、 flex-direction:colume も flex-flow:row nowrap も目的の効果を達成できません。

滿天的星座 2017-05-16 13:45:22

JavaScript - IE8 以降のブラウザを flex と互換性のあるものにする方法

このページは flex レイアウトを使用しています。私はこれまで数多くのページを作成してきましたが、flex は PC、特に IE ブラウザとの互換性が悪いことがわかりました。しかし、今変更するのは間違いなく大変な作業になるでしょう。フレックスレイアウトを IE8 以降のブラウザーにもサポートさせる方法はありますか?

仅有的幸福 2017-07-06 10:34:52

Flex に埋め込まれたレスポンシブ YouTube

レスポンシブ YouTube やその他のコンテンツを Flex コンテナに埋め込もうとしましたが、YouTube の埋め込みが含まれるコンテナが拡張されないため、他の要素と重なっているか、他の要素と重なっています。うまく説明できたかどうかわからないので、デモ用のコードとボックスも作成しました: https://codesandbox.io/s/objective-mountain-m4dhhb?file=/src/App.jsimport{Box,Paper }「@mui/mat から」

P粉111641966 2024-03-21 23:20:29

Flex-grow は子 div を展開しません

私は CSS を初めて使用するので、問題についてサポートが必要です。 flex-grow が block__column_2div を画面の最後まで展開しないのはなぜですか?カリキュラム理論によれば、これは予期される動作です。私の何が間違っているのか教えてください。コード例を以下に示します。 Index.html+style.css<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF

P粉388945432 2024-02-03 18:18:58

Tailwind CSS で 2 番目の flex 項目を最初の項目の周囲にラップする方法に関するガイド

2 つの flex アイテムを含む flex コンテナがあります。最初のフレックス項目はコンテナの幅を決定し、2 番目のフレックス項目はコンテナの周囲を囲む必要があります。 Tailwind CSS をスタイル設定に使用していますが、希望するレイアウトが得られません。これは私の現在のコードです。最初の項目の幅を設定するために w-2/3 を使用しようとしています。

P粉156983446 2023-08-02 18:31:22

フレックスボックスを使用して、ネストされたdiv構造の内部divを新しい行に配置するにはどうすればよいですか?

内部 div (Mem3) を Mem1 の下の新しい行に置きたいのですが、div 構造は絶対に変更したくありません。助けてください。このように =>.flex-container{display:flex;flex-wrap:wrap;}.flex-child{border:solidblue;}.flex-fgc{border:solidblue;}.flex-inner-gc{border:solidblue ;}<

P粉982054449 2023-09-13 12:26:10

css - flex を使用してこのレイアウトを実装するにはどうすればよいですか?

この種のレイアウトを実装するために flex を使用するにはどうすればよいでしょうか? 3 回目まで書き終えることができなかったので、誰かに助けを求めました。 {コード...}

ringa_lee 2017-06-30 09:56:55

フレックスボックスのデザイン: 吹き出しのすべての側面が接触するようにしたい

.fm-bubbles{display:flex;flex-wrap:wrap;width:100%;height:100px;}.fm-bubble{flex:1110%;height:max-content;border:1pxsolidroyalblue;border-radius:5px ;}<divclass="fm-content"><divclas

P粉002546490 2024-04-01 10:59:44

CSS を使用して、下部の Flex 列で項目の順序を維持するにはどうすればよいですか?

body,html{height:100%;position:relative;margin:0;padding:0;} のように、1 から 5 までにソートされ、コンテナーの上部から整列された flex アイテムの水平方向中央揃えの列があります。コンテナ{ 表示:インラインフレックス;フレックスラップ:ラップ;フレックス方向:列;整列アイテム:フレックスエンド;整列コンテンツ:

P粉277464743 2024-03-30 11:59:06

ホワイトスペース: nowrap with flex: 1; 子の幅が小さすぎてテキストを収容できません

同じサイズの 2 つの div を 1 行にテキストに収める解決策が見つかりません。空白のように見えます。親の width:fit-content を設定した後、幅は考慮されなくなりました。これらは可能な限り小さく、常に同じサイズにする必要があり、テキストを 2 行目に折り返さないでください。 div{display:flex;width:fit-content;}.button{padding:10px20px;flex:1;white-space:nowrap;min-width:130px;w

P粉776412597 2023-09-04 13:30:47

css - Flex レイアウトの問題

ヘッダーはフレックスレイアウトを使用しています検索ボックスを横方向中央に配置したいネイティブIOSのレイアウトと同様に、左右のコンテンツに影響されません横方向中央のままです実装した記憶があります以前はあったのですが、flex.cssを使ってから忘れてしまいましたので、ぜひご覧ください。

曾经蜡笔没有小新 2017-05-19 10:47:50

ラップされた子要素に合わせてコンテナを縮小します

次のような状況でフレックスボックスがどのように機能するか（機能するはずですか？...）を理解しようとしています: .holder{width:500px;background:lightgray;display:flex;flex-direction:row;justify-content:space -between;flex-wrap:nowrap;}.v2{width:320px;}.child{display:inline-block;

P粉182218860 2023-10-21 10:33:50

親要素が小さくなるにつれて、パディングサイズを小さくします

セル内に正方形を描画するグリッドがあります。行と列の数があり、グリッドセルを描画し、(配列に従って) 各セルに正方形があるかどうかを確認し、必要に応じて正方形を描画します。最終的な HTML の結果は次のようになります: (1 行 3 列があると仮定すると、正方形を持つセルは 2 つだけになります).row{display:flex;flex-wrap:wrap;flex:1000010%;}.column{display :flex ;flex-wrap:wrap;m

P粉807397973 2024-04-03 17:37:05

単一のグリッドまたは Flex を使用して多様なカードレイアウトを作成する: 実用的なガイド

写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイルデバイス用に個別のレイアウトを作成することです。次に、メディアクエリを使用して、他の 2 つのビューの表示プロパティを display:none に設定します。例: [コンピュータ] ビューにいる場合、コンピュータのカードレイアウトではディスプレイが「なし」に設定されていませんが、他の 2 台のコンピュータではディスプレイが「なし」に設定されています。これは機能しますが、多くの冗長性が生じます。 Flex または Grid を使用して 3 つのレイアウトすべてを実...

P粉808697471 2024-04-02 21:07:36