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

フロートやテーブルの必要性を排除しながら、要素を配置するための幅広いオプションを提供する柔軟なレイアウト用のCSSモジュール。

5
FlexboxとInternet Explorer 11（<html>のdisplay：flex？）
「フロート」レイアウトから離れ、将来のプロジェクトではCSSフレックスボックスを使用する予定です。現在のバージョンのすべての主要なブラウザーが（何らかの方法で）フレックスボックスをサポートしているように見えるのを見て、私は嬉しく思いました。 いくつかの例を見るために、「Solved by Flexbox」に向かいました。ただし、「スティッキーフッター」の例はInternet Explorer 11では動作しないようです。少し遊んでみdisplay:flexて、&lt;html&gt;とwidth:100%に追加することで動作しました&lt;body&gt; だから私の最初の質問は：誰かがそのロジックを私に説明できますか？私はいじっただけでうまくいきましたが、なぜそれがそのように働いたのかよくわかりません... 次に、Internet Explorer以外のすべてのブラウザーで機能する「メディアオブジェクト」の例があります。私もそれをいじりましたが、成功しませんでした。 したがって、2番目の質問は、「メディアオブジェクト」の例をInternet Explorerで機能させる「クリーンな」可能性はあるのでしょうか。
10
FlexboxがIEで垂直方向に中央揃えにならない
ページを中心としたいくつかのLipsumコンテンツを含むシンプルなWebページがあります。このページはChromeとFirefoxで正常に動作します。ウィンドウのサイズを小さくすると、コンテンツはウィンドウがいっぱいになるまでいっぱいになり、スクロールバーを追加して画面の下部に向かってコンテンツをいっぱいにします。 ただし、ページはIE11の中央に配置されません。ボディをフレックスすることでページをIEの中央に配置できますが、そうすると、コンテンツが画面の上部に向かって移動し始め、コンテンツの上部が切り取られます。 以下は2つのシナリオです。関連するフィドルを参照してください。問題がすぐに明らかでない場合は、結果ウィンドウのサイズを小さくして、強制的にスクロールバーを生成するようにします。 注：このアプリケーションは、Firefox、Chrome、IE（IE11）の最新バージョンのみを対象としています。これらはすべて、FlexboxのCandidate Recommendationをサポートしているため、機能の互換性は（理論的には）問題になりません。 編集：Fullscreen APIを使用して外側のdivを全画面表示すると、すべてのブラウザーは元のCSSを使用して正しく中央に配置されます。ただし、フルスクリーンモードを終了すると、IEは水平方向に中央揃えになり、垂直方向に上揃えに戻ります。 編集：IE11はベンダー固有でないFlexboxの実装を使用します。フレキシブルボックス（「フレックスボックス」）レイアウトの更新 Chrome / FFで中央揃えとサイズ変更が正しく行われるが、IE11では中央揃えではなく正しくサイズ変更される フィドル：http : //jsfiddle.net/Dragonseer/3D6vw/ html, body { height: 100%; width: 100%; } body { margin: 0; } .outer { min-width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; } .inner { width: 80%; } あらゆる場所で正しく中央に配置し、サイズを小さくすると上部がカットされる フィドル：http : //jsfiddle.net/Dragonseer/5CxAy/ html, …
8
高さを変更しても画像のアスペクト比を維持する
CSSフレックスボックスモデルを使用して、画像の縦横比を維持するにはどうすればよいですか？ JSフィドル：http : //jsfiddle.net/xLc2Le0k/2/ コンテナの幅を満たすために、画像が伸縮することに注意してください。それは問題ありませんが、画像の縦横比を維持するために高さを伸縮させることもできますか HTML &lt;div class="slider"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;img src="http://www.placebacon.net/400/300" alt="Bacn"&gt; &lt;/div&gt; CSS .slider { display: flex; } .slider img { margin: 0 5px; }
114 html  css  flexbox 
2
フレックスアイテムを右に浮かせる
私は &lt;div class="parent"&gt; &lt;div class="child" style="float:right"&gt; Ignore parent? &lt;/div&gt; &lt;div&gt; another child &lt;/div&gt; &lt;/div&gt; 親は持っています .parent { display: flex; } 私の最初の子供のために、私は単にアイテムを右に浮かせたいです。 そして、私の他のdivは、親によって設定されたフレックスルールに従います。 これは可能ですか？ そうでない場合、float: rightアンダーフレックスを行うにはどうすればよいですか？
113 html  css  flexbox 
5
私の立場：flexboxを使用するとスティッキー要素がスティッキーではない
私はこれに少し立ち往生していて、これとposition: stickyフレックスボックスの落とし穴を共有したいと思いました： ビューをフレックスボックスコンテナに切り替えるまで、スティッキーdivは正常に機能していましたが、フレックスボックスの親にラップされたときに突然divがスティッキーではなくなりました。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } &lt;div class="flexbox-wrapper"&gt; &lt;div class="regular"&gt; This is the regular box &lt;/div&gt; &lt;div class="sticky"&gt; This is the sticky box &lt;/div&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 問題を示すJSFiddle
2
最後のフレックスアイテムをコンテナの最後に配置します
この質問は、flexboxを含む完全なcss3サポートを備えたブラウザに関するものです。 いくつかのアイテムが入ったフレックスコンテナがあります。それらはすべてフレックススタートに正当化されますが、最後の .endアイテムをフレックスエンドに正当化する必要があります。HTMLを変更せずに、絶対配置に頼らずにこれを行う良い方法はありますか？ .container { display: flex; flex-direction: column; outline: 1px solid green; min-height: 400px; width: 100px; justify-content: flex-start; } p { height: 50px; background-color: blue; margin: 5px; } &lt;div class="container"&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt;&lt;/p&gt; &lt;p class="end"&gt;&lt;/p&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開
105 css  flexbox 
3
フレックスボックスのレイアウトに100％の垂直方向のスペースを確保するにはどうすればよいですか？
フレックスボックスのレイアウト行がブラウザウィンドウの残りの垂直方向のスペースを消費することをどのように確認できますか 3列のフレックスボックスレイアウトがあります。最初の2行は固定の高さですが、3行目は動的であり、ブラウザーの高さいっぱいまで拡大したいと思います。 列3を作成する行3に別のフレックスボックスがあります。これらの列内の要素を適切に調整するには、背景色やベースでのアイテムの配置などについて、ブラウザーの高さ全体を理解する必要があります。主要なレイアウトは、最終的には次のようになります。 .vwrapper { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; //height: 1000px; } .vwrapper #row1 { background-color: red; } .vwrapper #row2 { background-color: blue; } .vwrapper #row3 { background-color: green; flex 1 1 auto; display: flex; } .vwrapper #row3 #col1 { background-color: yellow; …
102 html  css  flexbox 
3
フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればよいですか？
flexboxを使用してフルハイトアプリを使用したい。私display: box;はこのリンクで古いflexboxレイアウトモジュール（およびその他のもの）を使用して欲しいものを見つけました：CSS3 Flexboxフルハイトアプリとオーバーフロー これは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザーに適したソリューションです。 新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされているのと同じリンクで2番目のソリューションを使用してみますheight: 0px;。縦スクロールを表示します。 他の問題が発生し、解決策よりも回避策であるため、あまり好きではありません。 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: scroll; } #container header { background-color: gray; } #container footer { background-color: gray; } &lt;section id="container" &gt; &lt;header id="header" &gt;This …
101 html  css  flexbox 
1
フレックスアイテムが伸びないようにする
サンプル： div { display: flex; height: 200px; background: tan; } span { background: red; } &lt;div&gt; &lt;span&gt;This is some text.&lt;/span&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 2つの質問があります。 なぜそれは基本的に起こるのspanですか？ フレックスコンテナ内の他のフレックスアイテムに影響を与えずに伸びないようにするための正しいアプローチは何ですか？
100 html  css  flexbox 
2
CSSグリッドレイアウトの高さが等しい行
Flexboxを使用してこれを達成することは不可能であると私は収集しています。各行はその要素に合わせるために必要な最小の高さしかあり得ないのですが、これは新しいCSSグリッドを使用して達成できますか？ 明確にするために、グリッド内のすべての要素の高さを、各行だけでなく、すべての行にわたって等しくしたいと考えています。基本的に、最も高い「セル」は、その行のセルだけでなく、すべてのセルの高さを示します。
8
CSS FlexBoxレイアウトで画像の自動サイズ変更とアスペクト比の維持？
以下のように表示されるCSSフレックスボックスレイアウトを使用しました。 画面が小さくなると、次のようになります。 問題は、元の画像からのアスペクト比を維持しながら、画像のサイズが変更されないことです。 純粋なCSSとフレックスボックスレイアウトを使用して、画面が小さくなった場合に画像のサイズを変更することはできますか？ これが私のhtmlです： &lt;div class="content"&gt; &lt;div class="row"&gt; &lt;div class="cell"&gt; &lt;img src="http://i.imgur.com/OUla6mK.jpg"/&gt; &lt;/div&gt; &lt;div class="cell"&gt; &lt;img src="http://i.imgur.com/M16WzMd.jpg"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 私のCSS： .content { background-color: yellow; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: …
96 html  css  flexbox 
6
Bootstrap4の列の中央にコンテンツを配置します
問題を解決するために助けが必要です。bootstrap4の列内のコンテンツを中央に配置する必要があります。以下のコードを見つけてください。 &lt;div class="container"&gt; &lt;div class="row justify-content-center"&gt; &lt;div class="col-3"&gt; &lt;div class="nauk-info-connections"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;
4
'position：absolute'はFlexboxと競合しますか？
div他の要素に影響を与えずに画面の上部にスティックを作成し、その子要素を中央に配置したいと思います。 .parent { display: flex; justify-content: center; position: absolute; } &lt;div class="parent"&gt; &lt;div class="child"&gt;text&lt;/div&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 position: absolute行を追加するjustify-content: centerと無効になります。それらは互いに競合しますか、そして、解決策は何ですか？ 編集 みんなありがとう、それは親の幅の問題です。しかし、私はReact Nativeを使用しているため、設定できませんwidth: 100%。しようとしましたflex: 1とalign-self: stretch、両方が動作していません。結局、Dimensionsを使用してウィンドウの全幅を取得し、それが機能しました。 編集 React Nativeの新しいバージョン（私は0.49を使用しています）の時点で、を受け入れますwidth: 100%。
7
ReactNativeの絶対位置決め水平中心
でているようですposition:absolute、使用中の要素を使用して中心にすることはできませんjustifyContentかalignItems。使用する回避策がありますmarginLeftが、デバイスの高さと幅を検出するために寸法を使用しても、すべてのデバイスで同じように表示されるわけではありません。 bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },
7
フレックスコンテナを中央に配置するが、フレックスアイテムを左揃えにする方法
フレックスアイテムを中央に配置したいのですが、2行目がある場合は、1の下に5（下の画像から）を配置し、親の中央には配置しません。 これが私が持っているものの例です： ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } li { list-style-type: none; border: 1px solid gray; margin: 15px; padding: 5px; width: 200px; } &lt;ul&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;li&gt;5&lt;/li&gt; &lt;li&gt;6&lt;/li&gt; &lt;/ul&gt; コードスニペットを実行するHide resultsスニペットを展開 http://jsfiddle.net/8jqbjese/2/
92 html  css  flexbox 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.