検討する flex-direction
質問を読むときに最初に頭に浮かぶのは、flex-basis常にに当てはまるわけではないということwidthです。
flex-directionisの場合row、flex-basis幅を制御します。
ときでもflex-directionありcolumn、flex-basis高さを制御します。
主な違い
flex-basisand width/の重要な違いはheight次のとおりです。
flex-basisフレックスアイテムにのみ適用されます。フレックスコンテナー（フレックスアイテムでもない）は無視しflex-basisますがwidth、およびを使用できますheight。
flex-basis主軸でのみ機能します。たとえば、にいる場合flex-direction: column、widthプロパティはflexアイテムを水平方向にサイズ変更するために必要になります。
flex-basis絶対位置のフレックスアイテムには影響しません。widthとheightプロパティが必要になります。絶対配置のフレックスアイテムは、フレックスレイアウトに参加しません。
使用してflex、3つのプロパティをプロパティ- flex-grow、flex-shrinkおよびflex-basis-きちんと1つの宣言に組み合わせることができます。を使用するwidthと、同じルールで複数行のコードが必要になります。
ブラウザの動作
それらがどのようにレンダリングされるかという点では、is またはでない限り、との間に違いはflex-basisありません。widthflex-basisautocontent
スペックから：
7.2.3。flex-basisプロパティ
以外のすべての値のautoとcontent、flex-basis同じように解決されたwidth横書きモードでは。
しかし、の影響autoかはcontent最小限であるか全く何もないかもしれません。スペックの詳細：
auto
フレックスアイテムで指定すると、autoキーワードはメインサイズプロパティの値をusedとして取得しますflex-basis。その値がそれ自体autoである場合、使用される値はcontentです。
content
フレックスアイテムのコンテンツに基づいて、自動サイズ変更を示します。
注：この値は、フレキシブルボックスレイアウトの初期リリースには存在しなかったため、一部の古い実装ではサポートされません。の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、必ずしも100pxになるとは限りません。
指定された幅をレンダリングし、固定したままにするには、縮小を無効にする必要があります。
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 */
7.2。柔軟性のコンポーネント
flex省略形は未指定のコンポーネントを正しくリセットして一般的な用途に対応するため、作成者は、省略形を直接使用するのではなく、省略形を使用して柔軟性を制御することをお勧めします。
ブラウザのバグ
一部のブラウザーでは、ネストされたフレックスコンテナー内のフレックスアイテムのサイズ設定に問題があります。
flex-basisネストされたflexコンテナでは無視されます。width動作します。
を使用するflex-basisと、コンテナはその子のサイズを無視し、子はコンテナからオーバーフローします。しかし、widthプロパティを使用すると、コンテナはその子のサイズを尊重し、それに応じて拡張します。
参照：
例：
フレックス使用してアイテムflex-basisやwhite-space: nowrapオーバーフローのinline-flexコンテナ。 width動作します。
と設定されたフレックスコンテナーinline-flexはflex-basis、兄弟をレンダリングするときに子を認識しませんwhite-space: nowrap（ただし、幅が未定義の項目である可能性があります）。コンテナは、アイテムを収容するために拡張しません。
ただし、widthプロパティをの代わりに使用するとflex-basis、コンテナはその子のサイズを尊重し、それに応じて拡張します。これはIE11とEdgeの問題ではありません。
参照：
例：
flex-basis（およびflex-grow）テーブル要素で機能しない
参照：
flex-basis祖父母コンテナが縮小してフィットする要素である場合、ChromeおよびFirefoxで失敗します。セットアップはEdgeで正常に機能します。
上記のリンクで示した例のように、およびをposition: absolute使用すると、同じ欠陥のある出力がレンダリングされます（jsfiddleデモ）。floatinline-block
IE 10および11に影響するバグ：