タグ付けされた質問 「flexbox」

ご覧のとおりlist-items、最初のrowは同じheightです。しかし、2番目のアイテムrowは異なりheightsます。すべてのアイテムにユニフォームを付けてほしいheight。 固定の高さを与えずにフレックスボックスのみを使用してこれを達成する方法はありますか？ これが私の code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> …

92 html  css  flexbox 

<button>-tagの内部要素をflexboxので中央に配置しようとしていjustify-content: centerます。しかし、Safariはそれらを中央に配置しません。他のタグにも同じスタイルを適用でき、意図したとおりに機能します（<p>-tagを参照）。ボタンだけが左揃えになります。 FirefoxまたはChromeを試してみると、違いがわかります。 上書きしなければならないユーザーエージェントスタイルはありますか？または、この問題に対する他の解決策はありますか？ div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> コードスニペットを実行するHide resultsスニペットを展開 そしてjsfiddle：http：//jsfiddle.net/z3sfwtn2/2/

91 html  css  safari  flexbox  css-grid 

コンテナ内に2つの要素があり、フレックスボックスを使用して並べています。2番目の要素（.flexbox-2）では、CSSで高さを設定しています。ただし、最初の要素（.flexbox-1）はの高さに一致し.flexbox-2ます。.flexbox-1の高さの一致を停止し.flexbox-2、代わりにその自然な高さを保持するにはどうすればよいですか？ これが私がこれまでに持っているものです（jsFiddleとしても利用可能です） .container { display: -webkit-flex; -webkit-flex-direction: row; } .flexbox-1 { -webkit-flex: 1; border: solid 3px red; } .flexbox-2 { -webkit-flex: 2; border: solid 3px blue; height: 200px; margin-left: 10px; } <div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div> コードスニペットを実行する結果を非表示スニペットを展開

85 html  css  flexbox 

昨日、CSS3フレックスボックスステートメントを使用するウェブサイトを学校で入手しました。私はそれを前に使ったことがありません。それで私はそれを少しググって、flexboxステートメントの多くの異なるスタイルを見つけました。 何人かの書き込みdisplay: box;、いくつかの使用display: flexbox;、および他のdisplay: flex;。 では、違いは何ですか？どちらを使うべきですか？

83 css  flexbox 

フレックスボックスを使用して、DIVを別のDIVの中央に配置しています。必要に応じて画面の中央にポップアップするダイアログウィンドウを考えてみてください。 正常に機能しますが、ダイアログの上下のスペースが完全に等しくなく、ダイアログの上下に残りのスペースの40％と60％があると、見栄えがよくなります。内部のテキストの量によってダイアログの高さが変わるため、注意が必要です。 たとえば、ブラウザの高さが1000ピクセルで、ダイアログウィンドウの高さが400ピクセルの場合、残りの垂直方向のスペース（600ピクセル）をダイアログの上240ピクセル、下360ピクセルにしたいとします。私はJavaScriptでそれを行うことができますが、CSSでいくつかの巧妙な方法があるかどうか知りたいです。#dialogBox DIVに下マージンを追加しようとしましたが、ダイアログの高さがブラウザーの高さに近づくと機能しません。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } <div id="dialogBoxPanel"> <div id="dialogBox">Text</div> </div> コードスニペットを実行するHide resultsスニペットを展開

23 html  css  flexbox  centering 

上と下に画像とテキストを含むメニューシステムを作成しようとしています。データは動的です。メニューシステムを表示して、各画像が他の画像から等距離になり、水平方向と垂直方向の両方で画像のグリッドに整列するようにしたいと考えています。 問題はテキストです。テキストが画像より長い場合、divは拡大されます。ただし、画像が互いに等間隔に配置されなくなるため、見苦しいギャップが生じます。 これを回避するための最善の方法は、他の各divに大きいdivのサイズを採用させることだと思います。ただし、これをどのように行うかはわかりません。 flex-wrapプロパティを使用してflexboxで試しました。うまく折り返していますが、各画像を等距離で並べる方法を見つけることができませんでした。 これを達成するにはどうすればよいですか？ 私のコードは次のとおりです： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } <div id="outer"> <div id="main"> <div …

17 html  css  flexbox 

選択したdivを展開し、残りのスペース（幅が固定されている最初のものを除く）に合わせて均等にストレッチすることで他のdivを適切に動作させるスクリプトを（ここでユーザーの助けを借りて）コード化しました。 そして、これが私が達成したいことの写真です： そのために、フレックスとトランジションを使用します。 それはうまく機能しますが、jQueryスクリプトは「400％」のストレッチ値を指定します（これはテストに最適です）。 ここで、選択したdivを「400％」の固定値ではなく、コンテンツに正確に合わせて拡大/縮小したいと思います。 どうすればいいのかわかりません。 出来ますか ？ divを複製してコンテンツに適合させ、その値を取得し、この値を使用してトランジションを行おうとしましたが、これはパーセンテージでの初期幅ですが、ピクセルでのターゲット値であることを意味します。それはうまくいきません。 ピクセル値をパーセンテージに変換すると、何らかの理由で結果がコンテンツに正確に適合しません。 すべての場合において、これはとにかく私が欲しいものを達成するための少し複雑な方法のようです。 選択したdivのコンテンツに合わせるために移行できるflexプロパティはありませんか？ ここにコードがあります（より読みやすくするために編集/簡略化されています）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; } else …

9 javascript  jquery  css  flexbox  css-transitions 

次の仕様で、さまざまなサイズの画像と比率の画像ギャラリーを表示します。 画像間に空白（余白）はありません。 元の比率をできる限り尊重します。 リンクで囲まれた画像。 非JSソリューション。 画像が少し切り取られる可能性があります。 ポータブルソリューション。 表示される画像のセットはランダムです。 画像は左から右に表示する必要があります（列を使用できないようにします）。 次のフレックスボックスソリューションでそれを実現しました。 コードスニペットを表示 section { display: flex; flex-flow: row wrap; justify-content: center; } section a { flex: auto; } section img { height: 100%; width: 100%; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <title>Controlling flex growability</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> </style> …

9 css  flexbox  image-gallery 

物事を振る舞うのに苦労しています。 レスポンシブサイトに画像の動的リストがあります。レイアウトは、画像を行/列または列行に配置できる場所に生成されます。 この例は近いですが、ブラウザのサイズが変更されると、ペアになっている画像が下部に配置されません... <div style="width:100%;"> <div style="width:60%; display: flex; margin-left: auto; margin-right: auto;"> <div id="outterrow" style="width:100%; float:left; display: flex; padding-bottom: 1.15%; "> <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;"> <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%"> </div> </div> <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;"> <div id="row" …

8 html  css  flexbox  object-fit