「display:flex;」とだけ記述した場合、有効となるflex関係のデフォルト値は？

Question

「display:flex;」とだけ記述したら、表示が変わりました
・flex-directionも何も指定していません

この場合、何の影響を受けているのでしょうか？
・「display:flex;」とだけ記述した場合、どういうflex関係のプロパティのデフォルト値が有効になるのでしょうか？

Answer 1

CSS Flexible Box Layout Module Level 1

ドラフトではありますが、ここを調べれば初期値(Initial Value)がわかるとおもいます。

ちなみに flex-direction の初期値は rowです。

Comments

[re97]

回答ありがとうございました

＞ flex-direction の初期値は rowです。
・flex-direction の初期値ではなく、「display:flex;」とだけ記述した場合、「flex-direction」「flex-wrap」等、何れが選択されるか知りたいです

・実際に試してみるまでは、「display:flex;」以外に何も指定しなければ表示は変わらないと思っていたのですが…

[flied_onion]

初期値とは「最初から指定されている値」です。display flexにしたタイミングで全て有効になります。それまでは displayがflexでないので影響を受けなかっただけですね。
基本的には選択するという考え方ではなくて、全て設定されていて、何が上書きされるかの方が近いと思います。
値が none だったにしても「設定しないという値」が設定されていると考えることができます。
Chromeの開発車ツールが使えるなら、要素を選んで スタイルの 「computed」を 「show all」にチェックをつけてみてみるとわかると思います。

ブラウザがレンダリングするとき、ユーザーが指定しない値をどうすればいいかが規定されていないとどんな値を選択すればいいか（つまりどう描画すればいいか）がブラウザの勝手となってしまい、ブラウザごとの見た目の乖離がひどいことになります。なので通常、ブラウザはユーザーが指定していない値は初期値を使います（そしてCSSに限らず、初期値とはそういった目的のために使われます）。

[re97]

コメントありがとうございます

＞要素を選んで スタイルの 「computed」を 「show all」にチェックをつけてみてみる
・試してみました
・意味を教えてください
・「show all」にチェックを入れると、適用されていない(上書き等されて？)ものを含めてすべてが表示される？

下記は同義ですか？
・「computed」で、「show all」にチェックを入れない
・「computed」で、「show all」にチェックを入れた結果の内、透明度が適用されていないプロパティ

[flied_onion]

> 「show all」にチェックを入れると、適用されていない(上書き等されて？)ものを含めてすべてが表示される？
すべて適用されている値です。透明なのはページのCSSで値が指定されていないものです（初期値が適用されたもの）。
展開して打消し線が引かれているのは、複数回指定されていて打ち消されたものです。

> 下記は同義ですか？
そうです。

[re97]

コメントありがとうございます

・おかげで当初の疑問はほぼ解決したのですが、1件だけ分からないです
・もしかしたら、Chromeの仕様かもしれませんが…

「display:flex;」とだけ記述した場合、「flex-direction」は初期値「row」が適用され、「flex-wrap」は初期値「nowrap」が適用されると思うのですが、

Chromeの「computed」で確認した場合、本来であれば何れも「ページのCSSで値を指定していない（初期値適用）ため、透明だと思います。

しかし、実際に試すと「flex-direction」だけは、どうしても透明にならないです…

Answer 2

コリスさんにて詳しく日本語で説明されています。

いずれが選択されるとかではなくて、「display:flex;」とした内包物に対して、
全てのプロパティで規定値が適用されるということです。
他のタグなんかにも、同様に規定値が勝手に適用されています。

Comments

[re97]

回答ありがとうございました
＞全てのプロパティで規定値が適用される

下記が同時適用されるということですか？
------------------------------------
flex-direction
・row

flex-wrap
・nowrap

justify-content
・flex-start

align-items
・stretch

align-content
・stretch

[LibertyBell3]

他にもありますが、そういうことですね。

規定値の概念については、flied_onion様が追記コメント内
最後の5行で触れた通りとなります。
全てのタグに規定値は定められています。