[解決済み】フレックスベースとワイドの違いは何ですか？

質問

この件に関する質問や記事はありますが、私が知る限りでは決定的なものはありません。私が見つけた最も良い要約は

<ブロッククオート

フレックスベース は、他の何かが計算される前の、要素の初期/開始サイズを指定することができます。パーセントまたは絶対値で指定します。

を持つ要素の動作については、それ自体あまり多くを語らない。 フレックスベース を設定します。私のフレックスボックスに関する現在の知識では、なぜこの方法で 幅 もあります。

具体的にどのように フレックスベース とは異なります。 幅 を実際に使ってみてください。

• を置き換えると 幅 で フレックスベース (その逆も同様）、視覚的に何が変わるのでしょうか？
• 両方に異なる値を設定するとどうなりますか？同じ値を設定した場合はどうなるのでしょうか？
• のどちらかを使用する特殊なケースはありますか？ 幅 または フレックスベース は、他を使うのと大きな違いがあるのでしょうか？
• どのように 幅 と フレックスベース のような他のフレックスボックスのスタイルと組み合わせて使用する場合は異なります。 フレックスラップ , フレックスグロウ と フレックスシュリンク ?
• その他に大きな違いはありますか？

---

編集/明確化 : この質問は、別の形式で、次のように尋ねられました。 フレックスベーシス・プロパティセットとは何ですか？ の違いについて、より直接的な比較やまとめが必要だと感じました。 フレックスベース と 幅 (または 高さ ) があればいいと思います。

解決方法は？

検討する 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 は、絶対位置のフレックスアイテムには効果がありません。 width と height プロパティが必要になります。 絶対位置指定されたフレックスアイテムは、フレックスレイアウトに参加しません。 .

• を使用することで flex プロパティ、3つのプロパティ flex-grow , flex-shrink と flex-basis - を一つの宣言にきれいにまとめることができます。使用方法 width となると、同じルールで複数行のコードが必要になります。

---

ブラウザの動作

レンダリング方法については、以下のようなものがあるはずです。 差はない と flex-basis と width でない限り flex-basis は auto または content .

仕様書より

7.2.3. は flex-basis プロパティ

を除くすべての値について auto と content , flex-basis と同じように解決されます。 width 横書きの場合

しかし、その影響は auto または content は最小限のものであるか、全くないかのどちらかです。詳しくは仕様書から。

auto

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

content

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

注：この値は、Flexible® の初期リリースには存在しませんでした。 ボックスレイアウトは、古い実装ではサポートされない場合があります。 同等の効果を得るには 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 ネストしたフレックスコンテナ内では無視されます。 width が動作します。

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

参考文献

• Chromeは子供のコンテンツに応じてフレックスペアレントを展開しない
• flex-basis使用時のフレックスアイテムのはみ出しについて
• widthとflex-basisの違い
• ネストされたフレックスコンテナのサイズ調整時に、Flex-basis が無視されます。
• flex-basis:100px は width:100px+flex-basis:auto とは異なる動作をします。

例

• https://jsfiddle.net/t419zhra/ (出典 ドレモラ )
• https://codepen.io/anon/pen/NVxaoy (出典 ダニエル )
• https://jsfiddle.net/voc9grx6/ (出典 クロミウムの不具合 )
• https://jsfiddle.net/qjpat9zk/ (出典 クロミウムの不具合 )

---

を使用したフレックスアイテム flex-basis と white-space: nowrap オーバーフロー inline-flex コンテナ width の作品です。

に設定されたフレックスコンテナは inline-flex を認識しません。 flex-basis を使用して兄弟をレンダリングした場合、その子には white-space: nowrap (幅が未定義のアイテムだけの可能性もありますが)。コンテナはアイテムを収容するために拡張されません。

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

参考文献

• インラインフレックスコンテナの幅が広がらない
• インラインフレックスコンテナ（display: inline-flex）が親コンテナの幅いっぱいまで広がっている

例

• https://jsfiddle.net/p18h0jxt/1/ (上記最初の投稿より)

---

flex-basis (そして flex-grow ) が table 要素で機能しない

参考文献

• なぜフレックスボックスはdivで動作し、tableでは動作しないのですか？
• なぜflex-grow: 1 は、Safari のテーブルに対して機能しないのですか？ (およびEdge）。

---

flex-basis は、祖父母コンテナが shrink-to-fit 要素である場合、Chrome と Firefox で失敗します。Edgeでは問題なく設定できます。

• 絶対位置のコンテナがフレックスボックスのコンテンツに合わせて幅を広げない

上のリンクで紹介した例のように position: absolute を使用することはできません。 float と inline-block を使用すると、同じように欠陥のある出力がレンダリングされます ( jsfiddleデモ ).

---

IE10、11に影響する不具合。

• flex ユニットレスを使用したショートハンドレッド宣言 flex-basis の値は無視されます。
• flex-basis を考慮していません。 box-sizing: border-box
• flex-basis はサポートしていません。 calc()
• での重要性は無視されます。 flex-basis を使用する場合 flex 速記