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

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

3
中央に1つのフレキシブルな列を持つ2つの固定幅の列をどのように持つことができますか？
左と右の列の幅が固定されている3列のフレックスボックスレイアウトを設定しようとしています。中央の列は、利用可能なスペースを埋めるために曲がっています。 列の寸法を設定しても、ウィンドウが縮小するにつれて、列は縮小しているように見えます。 誰でもこれを達成する方法を知っていますか？ さらに、ユーザーの操作に基づいて右の列を非表示にする必要があります。その場合、左の列は固定幅のままですが、中央の列が残りのスペースを埋めます。 #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the …
316 html  css  flexbox 
1
フレックスアイテムが過去のコンテンツサイズを縮小しないのはなぜですか？
フレックスボックスの列が4つあり、すべてが正常に動作しますが、列にテキストを追加して大きなフォントサイズに設定すると、フレックスプロパティにより、列が必要以上に広くなります。 私が使用しようword-break: break-wordとしましたが、それでも役に立ちましたが、列のサイズを非常に小さい幅に変更すると、テキストの文字が複数行に分割され（1行に1文字）、それでも列の幅は1文字のサイズより小さくなりません。 このビデオを見てください （最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も広い列になります。フレックス設定を常に尊重したいので、フレックスサイズ1：3：4：4） 私は知っています、フォントサイズと列のパディングをより小さく設定することは助けになります... 使用できませんoverflow-x: hidden。 JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { …
313 html  css  flexbox 
6
単一のフレックスボックスアイテムを正当化する方法（justify-contentをオーバーライドする）
あなたは無効にすることができalign-itemsてalign-self、フレックス項目について。justify-contentフレックスアイテムをオーバーライドする方法を探しています。 を使用したflexboxコンテナがありjustify-content:flex-end、最初のアイテムをにしたい場合justify-content: flex-start、どうすればそれができますか？ これはこの投稿で最もよく答えられました：https：//stackoverflow.com/a/33856609/269396
283 css  flexbox 
9
フレックスボックス：行あたり4アイテム
フレックスボックスを使用して、ページに合わせて動的にサイズ変更される8つのアイテムを表示しています。アイテムを強制的に2行に分割するにはどうすればよいですか？（1行に4つ）？ 以下は関連する抜粋です。 （または、jsfiddleを使用する場合-http : //jsfiddle.net/vivmaha/oq6prk1p/2/ ） .parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; } <body> <div class="parent-wrapper"> …
260 html  css  flexbox 
7
コンテナーがオーバーフローしているフレックスアイテムの上部にスクロールできません
したがって、フレックスボックスを使用して便利なモーダルを作成しようとしたときに、ブラウザーの問題のように見えるものが見つかり、既知の修正または回避策があるかどうか、またはそれを解決する方法についての考えがあります。 私が解決しようとしていることには、2つの側面があります。最初に、モーダルウィンドウを垂直方向に中央揃えにします。これは期待どおりに機能します。2つ目は、モーダルウィンドウをスクロールすることです-外部的に、モーダルウィンドウ全体をスクロールしますが、その中のコンテンツはスクロールしません（これにより、ドロップダウンや、モーダルの境界外に拡張できるその他のUI要素を使用できます-カスタム日付ピッカーなど） ただし、垂直方向のセンタリングとスクロールバーを組み合わせると、モーダルがオーバーフローし始めると、モーダルの上部にアクセスできなくなる可能性があります。上記の例では、オーバーフローを強制するようにサイズ変更できます。そうすることで、モーダルの一番下までスクロールできますが、一番上まではスクロールできません（最初の段落は切り取られます）。 これはサンプルコードへのリンクです（非常に簡略化されています） https://jsfiddle.net/dh9k18k0/2/ .modal-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); overflow-x: auto; } .modal-container .modal-window { display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; // Optional support to confirm scroll behavior makes sense in IE10 //-ms-flex-direction: …
9
複数行のフレックスボックスレイアウトで改行を指定する方法
OverаэтотвопросестьответынаStack Overflowнарусском：Flexbox item —переноснановуюстроку 複数行のフレックスボックスで改行する方法はありますか？ たとえば、このCodePenの 3番目のアイテムごとに中断する場合。 .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n) { background: silver; } <div class="container"> <div …
236 html  css  flexbox 
6
Chrome / Safariがフレックスの親の高さを100％満たしていない
特定の高さの垂直メニューが欲しいのですが。 各子は親の高さを埋め、テキストは中央揃えにする必要があります。 子の数はランダムなので、動的な値を使用する必要があります。 Div .containerにはランダムな数の子（.item）が含まれ、常に親の高さを満たす必要があります。それを実現するために、フレックスボックスを使用しました。 テキストを中央に揃えてリンクを作成するには、display: table-cellテクニックを使用しています。ただし、テーブルディスプレイを使用するには、高さを100％にする必要があります。 私の問題は.item-inner { height: 100% }、webkit（Chrome）で動作しないことです。 この問題の修正はありますか？ または、すべて.itemを中央に揃えた垂直のテキストで親の高さを満たすようにする別のテクニックはありますか？ ここの例jsFiddle、FirefoxとChromeで表示する必要があります .container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; …
3
フレックスベースと幅の違いは何ですか？
これに関する質問と記事がありましたが、私が知る限り、決定的なことは何もありません。私が見つけることができた最高の要約は flex-basisを使用すると、他の要素が計算される前に、要素の初期/開始サイズを指定できます。パーセンテージまたは絶対値のいずれかです。 ...それ自体は、フレックスベースが設定されている要素の動作についてはあまり説明していません。フレックスボックスについての私の現在の知識では、なぜそれが幅を説明できなかったのかわかりません。 フレックスベースと実際の幅がどのように異なるかを知りたいのですが。 幅をフレックスベースに（またはその逆に）置き換えると、視覚的に何が変わりますか？ 両方を異なる値に設定するとどうなりますか？同じ値の場合はどうなりますか？ 幅またはフレックスベースのどちらかを使用すると、もう一方を使用する場合と大幅に異なる特別なケースはありますか？ flex-wrap、flex-grow、flex-shrinkなどの他のフレックスボックススタイルと組み合わせて使用​​した場合、幅とフレックス基準はどのように異なりますか？ 他の重要な違いはありますか？ 編集/説明：この質問は、「厳密にフレックスベースのプロパティセットとは何ですか？」で別の形式で尋ねられました。しかし、フレックスベースと幅（または高さ）の違いをより直接比較または要約するとよいと感じました。
224 css  flexbox  width 
7
コンテンツがオーバーフローしているフレックスボックスをスクロールする
上記のレイアウトを実現するために使用しているコードは次のとおりです。 .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …
15
ReactNative：テキストを中央揃えにする方法は？
水平と垂直の両方でReactNativeのテキストを中央揃えにする方法は？ justifyContent = "center"およびalignItems = "center"が機能しないrnplay.orgにサンプルアプリケーションがあります。https： //rnplay.org/apps/AoxNKQ テキストは中央揃えにする必要があります。そして、なぜテキスト（黄色）と親コンテナの間に上部にマージンがあるのですか？ コード： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); } …
3
CSSはフレックスボックスで1つのアイテムを右に揃えます
https://jsfiddle.net/vhem8scs/ フレックスボックスを使用して、2つのアイテムを左揃えにし、1つのアイテムを右揃えにすることはできますか？リンクはそれをより明確に示しています。最後の例は私が達成したいものです。 フレックスボックスには、1つのコードブロックがあります。floatでは、4つのコードブロックがあります。それがflexboxを好む理由の1つです。 HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div> <!-- DESIRED RESULT --> <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { content: ''; display: table; clear: both; } .result div …
212 css  alignment  flexbox 
2
フレックスボックスの残りの*水平*スペースにdivを埋める
フレックスボックスに2つのdivが並んでいます。右手は常に同じ幅である必要があり、左手は残りのスペースをつかむだけです。しかし、特に幅を設定しない限り、効果はありません。 したがって、現時点では96％に設定されており、実際に画面を押しつぶすまで問題ありません。その後、右側のdivに必要なスペースが不足します。 私はそれをそのままにしておくことができると思いますが、それは間違っていると感じています-言う方法があるように： 正しいものは常に同じです。あなたは左側にいます-あなたは残っているすべてを手に入れます .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On a Bit …
204 html  css  flexbox 
10
React Native Flexboxの100％幅
すでにいくつかのflexboxチュートリアルを読みましたが、それでもこの単純なタスクを機能させることができません。 赤いボックスの幅を100％にするにはどうすればよいですか？ コード： <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> スタイル： container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', borderWidth: 1, flexDirection: 'column', }, welcome: { fontSize: 20, …
7
<fieldset>をフレックスコンテナーにできないのはなぜですか？
私はスタイルにしようとしたfieldsetとの要素をdisplay: flexとdisplay: inline-flex。 ただし、機能しませんでした。のflexようblockに動作し、のようにinline-flex動作しましたinline-block。 これはFirefoxとChromeの両方で発生しますが、不思議なことにIEでは機能します。 バグですか？HTML5でも、CSSフレキシブルボックスレイアウトの仕様fieldsetでも、特別な動作があるはずです。 fieldset, div { display: flex; border: 1px solid; } &lt;fieldset&gt; &lt;p&gt;foo&lt;/p&gt; &lt;p&gt;bar&lt;/p&gt; &lt;/fieldset&gt; &lt;div&gt; &lt;p&gt;foo&lt;/p&gt; &lt;p&gt;bar&lt;/p&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開
201 html  css  flexbox 
4
display：flexを使用して、残りの垂直スペースをCSSで埋めます
3列レイアウトの場合： 上の行はその内容に応じてサイズを調整する必要があります 下の行はピクセル単位で固定された高さでなければなりません 真ん中の行はコンテナを埋めるために拡大する必要があります 問題は、メインコンテンツが展開すると、ヘッダーとフッターの行が圧縮されることです。 HTML： &lt;section&gt; &lt;header&gt; header: sized to content &lt;br&gt;(but is it really?) &lt;/header&gt; &lt;div&gt; main content: fills remaining space&lt;br&gt; x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt; &lt;!-- uncomment to see it break - -&gt; x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt; x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt; x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt; x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt; &lt;!-- --&gt; &lt;/div&gt; &lt;footer&gt; footer: fixed height in px &lt;/footer&gt; &lt;/section&gt; CSS： section { …
194 css  layout  flexbox 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.