flex-basis: 0％;なのにどうして表示されているのですか？

Question

最近CSSを勉強し始めた初心者です。

flex: 1;
と指定すると
flex: 1 1 0%;
となると思うのですが、要素の幅が0％の場合、要素が消えてしまうのではないかと思いました。

実際してみると、表示されているので疑問に思い質問させて頂きました。

0％は指定しないという意味ではないですよね？

よろしくお願いします。

Answer 1

flex: 1;

と指定すると
flex: 1 1 0%;
となる

ならんですよ。
間違えていましたので、削除いたします。失礼いたしました。

その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。

一括指定プロパティ - CSS: カスケーディングスタイルシート | MDN

　

初期値 1

flex-shrink - CSS: カスケーディングスタイルシート | MDN

　

初期値 0

flex-grow - CSS: カスケーディングスタイルシート | MDN

　

初期値 auto

flex-basis - CSS: カスケーディングスタイルシート | MDN

誤回答のため、追記修正

maisumakunさんからコメントをいただいたとおり、

  flex: 1;

は

  flex: 1 1 0;

となるので、flex-growが1なので0pxからコンテナの余剰分、幅が拡大する、ということですね。
大変失礼いたしました。

Comments

[maisumakun]

「1つまたは2つの単位なしの値を使用した場合、 flex-basis は auto から 0 に変更されます。」とのことです。

https://developer.mozilla.org/ja/docs/Web/CSS/flex

[Lhankor_Mhy]

なんと、これは完全に私が間違っていましたね、お恥ずかしい。

[miho72neko]

なるほど!!!
わかりました。
ありがとうございます(*´▽｀*)