☰

flex-basis autoと0（ゼロ）の違い 質問する

tag-icon • tag-icon html css flexbox
flex-basis autoと0（ゼロ）の違い 質問する

これら2つの値の違いは何でしょうか？私は数多くの例をテストしましたが、それらはまったく同じ結果になりました...誰か、flex-basis: auto;同じ結果にならない例を教えてください。flex-basis: 0;

ベストアンサー1

「0」と「auto」の flex-basis は、すべての状況ではないにしても、ほとんどの場合で異なります。数値は特定の幅として解釈されるため、ゼロは指定と同じになり"width: 0"、コンテンツに応じて要素を可能な限り最小の幅に縮小するか、オーバーフロー部分が非表示になっている場合や要素が直接サイズ変更可能な場合 (画像など) は要素自体をゼロにします。

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>

おすすめ記事