web-dev-qa-db-ja.com

フレックスベースと幅の違いは何ですか？

これについて質問や記事がありますが、私が言うことができる限り決定的なものは何もありません。私が見つけることができる最高の要約は

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

...それ自体は flex-basis setを持つ要素の振る舞いについてはあまり言っていません。現在のflexboxの知識では、なぜそれが width も記述できないのかわかりません。

実際には flex-basis が width とどの程度異なるのかを知りたいのですが。

  • width を flex-basis （およびその逆）に置き換えると、視覚的に何が変わりますか？
  • 両方を異なる値に設定するとどうなりますか？それらが同じ値を持っているとどうなりますか？
  • width または flex-basis のいずれかを使用すると、もう一方を使用するのと大きく異なる場合がある特別な場合がありますか。
  • width および flex-basis を flex-wrap 、 flex-grow 、および flex-shrink など、他のflexboxスタイルと組み合わせて使用​​するとどう変わるか？
  • 他に大きな違いはありますか？

編集/説明：この質問は 厳密にはフレックスベースのプロパティセットは何ですか？ で異なる形式で尋ねられましたが、私は感じました flex-basis および width （または height ）の違いをより直接的に比較または要約するといいでしょう。

csscss3flexbox
179
jpeltoniemi

flex-directionを検討する

質問を読むときに最初に頭に浮かぶのは、flex-basisが常にwidthに適用されるわけではないということです。

flex-directionがrowの場合、flex-basisが幅を制御します。

ただし、flex-directionがcolumnの場合、flex-basisは高さを制御します。

主な違い

flex-basisとwidth/heightの重要な違いを次に示します。

  • flex-basisは、フレックスアイテムにのみ適用されます。フレックスコンテナ（フレックスアイテムでもない）はflex-basisを無視しますが、widthおよびheightを使用できます。

  • flex-basisは主軸でのみ機能します。たとえば、flex-direction: columnにいる場合、widthプロパティは、フレックスアイテムを水平方向にサイズ変更するために必要です。

  • flex-basisは、絶対配置のflexアイテムには影響しません。 widthおよびheightプロパティが必要です。 絶対配置のフレックスアイテムはフレックスレイアウトに参加しません 。

  • flexプロパティを使用すると、3つのプロパティ（flex-grow、flex-shrink、flex-basis）を1つの宣言にきちんと組み合わせることができます。 widthを使用すると、同じルールで複数行のコードが必要になります。

ブラウザの動作

レンダリング方法については、flex-basisがwidthまたはautoでない限り、flex-basisとcontentの間に違いなしが必要です。

仕様から：

7.2.3。flex-basisプロパティ

autoおよびcontent以外のすべての値について、flex-basisは、横書きモードのwidthと同じ方法で解決されます。

ただし、autoまたはcontentの影響は最小限であるか、まったくない場合があります。仕様からもっと：

auto

フレックスアイテムで指定されている場合、autoキーワードは、使用されるflex-basisとしてメインサイズプロパティの値を取得します。その値自体がautoである場合、使用される値はcontentです。

content

フレックスアイテムのコンテンツに基づいて、自動サイズ設定を示します。

注：この値はFlexible Box Layoutの初期リリースには存在しなかったため、一部の古い実装ではサポートされていません。同等の効果は、autoをメインサイズ（widthまたはheight）とともにautoとともに使用することで実現できます。

したがって、仕様によれば、flex-basisとwidthは、flex-basisがautoまたはcontentでない限り、同じように解決されます。このような場合、flex-basisはコンテンツ幅を使用する場合があります（おそらく、widthプロパティも使用します）。

flex-shrinkファクター

フレックスコンテナの初期設定を覚えておくことは重要です。これらの設定の一部は次のとおりです。

  • flex-direction: row-フレックスアイテムは水平に整列します
  • justify-content: flex-start-フレックスアイテムは、メイン軸の行の先頭にスタックします
  • align-items: stretch-コンテナのクロスサイズをカバーするためにフレックスアイテムが展開されます
  • flex-wrap: nowrap-フレックスアイテムは強制的に1行に収められます
  • flex-shrink: 1-フレックスアイテムは縮小できます

最後の設定に注意してください。

フレックス項目はデフォルトで縮小することが許可されているため（コンテナがオーバーフローするのを防ぎます）、指定されたflex-basis/width/heightはオーバーライドされます。

たとえば、flex-basis: 100pxまたはwidth: 100pxと組み合わせたflex-shrink: 1またはdiv { width: 100px; flex-shrink: 0; } は、必ずしも100pxとは限りません。

指定された幅をレンダリングするには– そしてそれを固定する –縮小を無効にする必要があります：

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

OR

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

または、仕様で推奨されているとおり：

flex-basis

7.2。柔軟性のコンポーネント

一般的な使用法 に対応するために、省略形は未指定のコンポーネントを正しくリセットするため、作成者は、その省略形を直接使用するのではなく、flex省略形を使用して柔軟性を制御することをお勧めします。

ブラウザのバグ

一部のブラウザでは、ネストされたフレックスコンテナ内のフレックスアイテムのサイズ設定に問題があります。

ネストされたflexコンテナではflex-basisは無視されます。 widthは機能します。

flex-basisを使用すると、コンテナはその子のサイズを無視し、子はコンテナをオーバーフローします。しかし、widthプロパティを使用すると、コンテナはその子のサイズを尊重し、それに応じて展開します。

参照：

例：

white-space: nowrapおよびinline-flexコンテナーを使用してアイテムをフレックスします。 widthは機能します。

inline-flexに設定されたflexコンテナは、flex-basisで兄弟をレンダリングするときに、子上のwhite-space: nowrapを認識しないようです（ただし、幅が未定義のアイテムである場合もあります）。コンテナはアイテムを収容するために拡張しません。

ただし、flex-basisの代わりにwidthプロパティが使用される場合、コンテナはその子のサイズを尊重し、それに応じて展開します。これはIE11とEdgeでは問題ではありません。

参照：

例：

IE 10および11に影響するバグ：

276
Michael_B

Michael_Bの優れた要約に加えて、これを繰り返す価値があります。

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

ここで重要なのは初期です。

それ自体では、これはwidth/heightに解決されますntil他のflex grow/shrinkプロパティが効いてきます。

そう。と子供

.child {
 flex-basis:25%;
 flex-grow:1;
}

最初は25％の幅になりますが、それから他の要素が考慮されるまで可能な限りすぐに拡大します。ない場合は100％の幅/高さになります。

簡単なデモ：

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: Plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}
<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

flex-grow、flex-shrink、およびflex-basis（または省略形のflex :fg fs fb）を試してみると、興味深い結果が得られます。

27
Paulie_D

おそらく最も重要な追加点：

ブラウザがflexをサポートしていない場合はどうなりますか？そのような場合、width/heightが引き継ぎ、それらの値が適用されます。

たとえあなたがwidth/heightのために全く異なる値を持っていたとしても、flex-basisを要素上で定義することは非常に良い考えです - ほとんど必須です - 。 display:flexを無効にして何が得られるかを確認することでテストすることを忘れないでください。

4
Niet the Dark Absol