flex-basisとwidthの違いは何ですか？質問する

考慮するflex-direction

あなたの質問を読んだときに最初に思い浮かぶのは、flex-basis必ずしも に当てはまるわけではないということですwidth。

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

しかし、flex-directionの場合にはcolumn、flex-basis高さを制御します。

主な違い

flex-basisとwidth/の間には、いくつかの重要な違いがありますheight。

• flex-basisフレックス アイテムにのみ適用されます。フレックス コンテナー (フレックス アイテムではないもの) は を無視しますが、と をflex-basis使用できます。widthheight

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

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

• プロパティを使用すると、、のflex3 つのプロパティを 1 つの宣言にうまく組み合わせることができます。 を使用すると、同じルールに複数行のコードが必要になります。flex-growflex-shrinkflex-basiswidth

ブラウザの動作

レンダリング方法に関しては、またはでない限り、との間に違いはありません。flex-basiswidthflex-basisautocontent

仕様より:

7.2.3.flex-basisプロパティ

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

autoしかし、またはの影響はcontent最小限か、まったくない可能性があります。仕様からの詳細:

auto

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

content

フレックス アイテムのコンテンツに基づいて、自動的にサイズが調整されることを示します。

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

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

要因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、必ずしも 100 px になるわけではありません。

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

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

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

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