web-dev-qa-db-ja.com

正確にフレックスベースのプロパティセットとは何ですか?

max-widthまたはwidthflex-basisではなくflexアイテムに設定するのに違いはありますか?

flex-grow/shrinkプロパティの「ブレークポイント」ですか?

そして、flex-wrap: wrapを設定すると、ブラウザはアイテムを新しい行に移動するポイントをどのように決定しますか?それは幅または「フレックスベース」に応じていますか?

例: http://jsfiddle.net/wP5UP/ 最後の2つのボックスには同じflex-basis: 200pxがありますが、まだonlyウィンドウが300ピクセルから400ピクセルの間にある場合、そのうちの1つが下に移動します。どうして?

41
ilyo

flex-basisを使用すると、他の要素を計算する前に、要素の初期/開始サイズを指定できます。パーセンテージまたは絶対値のいずれかです。

ただし、これはflex-grow/shrinkプロパティのブレークポイントではありませんnot。ブラウザーは、要素の初期サイズが交差軸の幅(従来の意味では幅)を超えるかどうかに基づいて、要素をいつ折り返すかを決定します。

フィドルに基づいて、最後のウィンドウが下に移動する理由は、親の幅が前の兄弟によって完全に占有されているためです。そして、コンテンツの折り返しを許可すると、最初の行に収まらない要素が取得されます次の行にプッシュされます。 flex-growはゼロ以外の値であるため、2番目の行に残っているすべてのスペースを埋めるために単純に拡張されます。

デモ版のフィドル(あなたのものから修正)を参照 .

フィドルを見ると、最後のアイテムが新しいサイズ宣言を持つように修正しました。

.size3 {
  flex: 0 1 300px;
}

要素が意図したとおりに300pxであることがわかります。ただし、値が0( 例を参照 )を超えるようにflex-growプロパティを微調整すると、予想される動作である行を埋めるために伸縮します。 新しい行コンテキストには比較する兄弟がないため、1から無限大までの整数はサイズに影響しません。

したがって、flex-growは次のように表示されます。

  • 0:(デフォルト値)ストレッチしない。要素のコンテンツ幅に合わせてサイズを調整するか、flex-basisに従います。
  • 1ストレッチ
  • ≥2(整数n):ストレッチ。たとえば、同じ行にflex-grow: 1がある他の要素のサイズのn倍になります。
41
Terry

良い記事 https://gedd.ski/post/the-difference-between-width-and-flex-basis/

フレックスベース:フレックスコンテナに配置される前のフレックスアイテムのサイズ。これは、アイテムの理想的なサイズまたは仮想サイズです。しかし、フレックスベースは保証サイズではありません!ブラウザがアイテムをフレックスコンテナに入れるとすぐに、状況は変わります。多くの場合、すべてのアイテムのflex-basis値が加算された後、フレックスコンテナーに十分なスペースがないか、余分なスペースがあります。

1
zloctb