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

すべて同じ幅のアイテムがいくつかあるflexboxを使用したいと思います。flexboxは、スペース自体ではなく、スペースを均等に分散していることに気付きました。 例えば： .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 最初の項目は2番目の項目よりもかなり大きいです。3アイテム、4アイテム、またはnアイテムがある場合、それらすべてを同じ行に表示し、アイテムごとに等量のスペースを確保します。 何か案は？ http://codepen.io/anon/pen/gbJBqM

186 css  flexbox 

次のスニペットを考えてみましょう： .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the …

176 css  internet-explorer  flexbox  internet-explorer-11 

私は次のように機能するはずのネストされたフレックスボックスレイアウトに取り組んでいます。 最も外側のレベル（ul#main）は水平方向のリストであり、さらに項目が追加されると、右側に展開する必要があります。大きくなりすぎる場合は、水平スクロールバーが必要です。 #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } このリストの各項目（ul#main > li）には、ヘッダー（ul#main > li > h2）と内部リスト（ul#main > li > ul.tasks）があります。この内部リストは垂直であり、必要に応じて列に折り返す必要があります。より多くの列に折り返す場合、より多くのアイテムのためのスペースを作るために、その幅を増やす必要があります。この幅の増加は、外側のリストの包含アイテムにも適用されます。 .tasks { flex-direction: column; flex-wrap: wrap; /* ...and more... */ } 私の問題は、ウィンドウの高さが小さくなりすぎても、内部リストが折り返されないことです。私はすべてのflexプロパティを何度も改ざんし、CSS-Tricksのガイドラインに細心の注意を払って試みましたが、うまくいきませんでした。 このJSFiddleは、これまでのところを示しています。 期待される結果 （私が欲しいもの）： 実際の結果 （私が得るもの）： 古い結果 （2015年に取得したもの）： 更新 いくつかの調査の後、これはより大きな問題のように見え始めています。主要なブラウザはすべて同じように動作し、フレックスボックスのデザインがネストされていることとは関係ありません。さらにシンプルなフレックスボックスの列レイアウトでは、アイテムが折り返されるときにリストの幅を増やすことを拒否します。 この他のJSFiddleは問題を明確に示しています。Chrome、Firefox、IE11の現在のバージョンでは、すべてのアイテムが正しく折り返されます。rowモードではリストの高さは増加しますが、モードでは幅は増加しませんcolumn。また、columnモードの高さを変更しても、要素の即時のリフローはまったくありませんが、rowモードにはあります。 …

167 html  css  flexbox 

休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 5年前休業。 この質問を改善する 最近Flexbox、divを同じ高さにするためのソリューションを探していたときに、最高のものに依存することを発見しました。 CSS-tricks.com の次のページを読んだところ、flexbox学習と使用が非常に強力なモジュールであると確信しました。ただし、Twitterブートストラップ（および類似のフレームワーク）がグリッドシステムと同じような機能（もちろん、さらに多くの機能）を提供しているという事実についても考えさせられました。 さて、質問は次のとおりflexboxです。の長所と短所は何ですか？Flexboxでできない、Bootstrapのようなフレームワークでできることはありますか（もちろん、純粋にグリッドシステムについて話しています）。ウェブサイトに実装するとどちらが速いですか？ グリッドシステムだけの場合flexbox、純粋にを使用する方が賢明だと思いますが、すでにフレームワークを使用している場合、何かflexbox追加できるものはありますか？ flexboxフレームワークよりも「グリッドシステム」を選択する理由はありますか？

161 html  css  twitter-bootstrap  flexbox 

次のレイアウトを想像してください。ドットはボックス間のスペースを表しています。 [Left box]......[Center box]......[Right box] 右のボックスを削除しても、次のように、中央のボックスがまだ中央にあるのが好きです。 [Left box]......[Center box]................. 左のボックスを削除する場合も同様です。 ................[Center box]................. これで、中央のボックス内のコンテンツが長くなると、中央に配置されたままの状態で、必要なだけのスペースが必要になります。スペースが残っていないところ際に、左と右のボックスは、このように縮小し、決してだろうoverflow:hiddenとtext-overflow: ellipsisコンテンツを破るために有効になるだろう。 [Left box][Center boxxxxxxxxxxxxx][Right box] 上記のすべてが私の理想的な状況ですが、私はこの効果を達成する方法がわかりません。なぜなら私がそのようなフレックス構造を作成するとき： .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 左と右のボックスがまったく同じサイズであれば、希望する効果が得られます。ただし、2つのうちの1つが異なるサイズのものである場合、中央に配置されたボックスは真に中央に配置されなくなります。 私を助けることができる人はいますか？ 更新 A justify-selfはいいでしょう、これは理想的です： .leftBox { justify-self : flex-start; …

161 html  css  flexbox  centering 

Flexboxには、画像を本来の高さに伸ばすという動作があります。つまり、子画像を含むflexboxコンテナがあり、その画像の幅をサイズ変更すると、高さがまったくサイズ変更されず、画像が引き伸ばされます。 div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> コードスニペットを実行する結果を非表示スニペットを展開 何が原因ですか？ このCodePenを追加して、私の意味を説明しました。

156 html  css  flexbox 

のコンテナ<div>がありdisplay: flexます。子供がい<a>ます。 子供を「インライン」に表示するにはどうすればよいですか？ 具体的には、子の幅をその内容によって決定し、親の幅に拡張しないようにするにはどうすればよいですか？ 私が試したこと： 子供をに設定しましたdisplay: inline-flexが、それでも全幅を占有しました。他のすべての表示プロパティも試しましたが、何の効果もありませんでした。 例： .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; } <div class="container"> <a href="#">Test</a> </div> コードスニペットを実行する結果を非表示スニペットを展開 http://codepen.io/donpinkus/pen/YGRxRY

154 html  css  flexbox 

CodePen：http ://codepen.io/anon/pen/RPNpaP 。 サイドバイサイドビューの赤いボックスの幅を25 emだけにしたいのですが、このメディアクエリ内にCSSを設定してこれを実現しようとしています。 @media all and (min-width: 811px) {...} に： .flexbox .red { width: 25em; } しかし、私がそうすると、これが起こります： http://i.imgur.com/niFBrwt.png 私が間違っていることは何か考えていますか？

149 html  css  flexbox 

私が持っていると思いますA Bし、C真ん中に整列します。 どうすれDば完全に右に行くことができますか？ 前： 後： ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> コードスニペットを実行する結果を非表示スニペットを展開 …

147 html  css  flexbox 

左右のフレックスボックスがあります： .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 問題は、適切な子供が反応しにくいことです。具体的には、ラッパーの高さいっぱいにしたい。 これを達成する方法？

141 css  flexbox 

私はかなり一般的な石積みレイアウトを実装する必要があります。ただし、いくつかの理由により、JavaScriptを使用したくありません。 パラメーター： すべての要素の幅は同じです 要素の高さがサーバー側では計算できない（画像とさまざまな量のテキスト） 必要な場合は、固定数の列を使用できます これには、最新のブラウザーであるプロパティで機能する簡単な解決策がありcolumn-countます。 そのソリューションの問題は、要素が列に順序付けられていることです。 要素を行に並べる必要がありますが、少なくともおよそ： 私が試したアプローチは機能しません： アイテムの作成display: inline-block：垂直方向のスペースを無駄にします。 アイテムを作るfloat: left：笑、いいえ。 これで、サーバー側のレンダリングを変更して、項目数を列数で割って項目を並べ替えることができますが、これは複雑でエラーが発生しやすい（ブラウザーが項目リストを列に分割する方法に基づいている）ので、可能であればそれを避けるために。 これを可能にするいくつかの新しいflexboxマジックがありますか？

134 html  css  flexbox  css-grid 

我々はすべて知っているように、flexプロパティがの省略形ですflex-grow、flex-shrink、およびflex-basisプロパティが。デフォルト値はです0 1 auto。これは、 flex-grow: 0; flex-shrink: 1; flex-basis: auto; しかし、私は気づいた、多くの場所flex: 1で使用されています。それがために簡略化したものです1 1 autoか1 0 auto？それが何を意味するのか理解できず、ググっても何も得られません

128 css  flexbox 

典型的なCSSでは、2つの列の一方を左右に、もう一方の間隔を空けてフロートさせることができます。フレックスボックスでどうすればいいですか？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

121 html  css  flexbox 

次のコードは、このライブの例にあります 私は次の反応ネイティブ要素を持っています： 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here is a really long text that you can do nothing about, its gonna …

121 css  reactjs  react-native  flexbox 

私はこのスレッドを見つけました— 画像の縦横比を維持しながら、どのようにして画像をストレッチして<div>を埋めますか？—それは完全に私が欲しいものではありません。 特定のサイズのdivとその中に画像があります。画像が横向きか縦向きかに関係なく、常に divに画像を入力したい。また、画像が切り取られていても問題ありません（div自体にオーバーフローが隠されています）。 画像がポートレートであるので、もし私がしたいwidthこと100%とheight:auto、それは割合にとどまるようにします。画像が横長の場合は私がしたいheightことを100%してwidth to beauto`。複雑に聞こえますか？ <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> どうすればいいのかわからないので、私が何を言っているのかを簡単にイメージしました。私もそれを適切に説明することはできません。 だから、私はこれを尋ねる最初のものではないと思います。しかし、私は本当にこれに対する解決策を見つけることができませんでした。たぶん、これを行うための新しいCSS3の方法があるかもしれません-フレックスボックスを考えています。何か案が？多分それは私が思っているよりももっと簡単ですか？

120 image  css  positioning  flexbox