親要素にdisplay: flexを指定すると、その親要素の子要素はインラインブロック要素になるのでしょうか。

Question

親要素にdisplay: flexを指定すると、その親要素の子要素はブロック要素に関わらず、全てインラインブロック要素になるという認識で問題ないでしょうか。
初歩的な質問で恐れ入りますが、ご回答いただきたいです。

Answer 1

その親要素の子要素はブロック要素に関わらず、全てインラインブロック要素になるという認識で問題ないでしょうか。

インライン要素・ブロック要素という語は、一般的なフローレイアウトを考える上での用語です。

display: flexの直下では、フローレイアウトではないフレックスボックスですので、子要素は「フレックスアイテム」となります（インライン要素・ブロック要素という概念はそもそも適用できません）。

Comments

[maisumakun]

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

Answer 2

全てインラインブロック要素になるという認識で問題ないでしょうか。

いいえ。すべてブロック要素として扱われます。
inline-block になるから横並びできる、というわけではなく、ブロック要素を横並びにしたりできるのが displya:flex です。

https://drafts.csswg.org/css-flexbox-1/#ref-for-blockify

If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified.

Answer 3

いえ、ブロック要素になります。

gridやflexの値がついた親は、そのboxのdisplay typeをブロック化する。
Automatic Box Type Transformations | メモログ

　

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.
CSS Flexible Box Layout Module Level 1