質問: 環境:MacBook Pro Chrome Atomエディタ flex-direction: column; にすると、インライン要素はブロック要素に変化するのでしょうか? コード ``` ボタンタグtest1 aタグtest1 ボタンタグtest2 aタグtest2 ``` ``` .test1{ display: flex; flex-direction: column; } .test1 button{ height: 100px; } .test1 a{ border: 3px solid blue; height: 100px; } .test2 button{ height: 100px; } .test2 a{ border: 3px solid blue; height: 100px; } ``` ↑このコードのブラウザ画面 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/f0730be6996c769faef6cc8204afe4a6.png) 以下、質問内容になります。 1 インライン要素がブロック要素に変化したと思った理由。 columnにすると、「ボタンタグtest1」と、borderで囲った「aタグtest1」が、 ・画面の端から端まで広がる ・heightが効いている。 以上の事から、ブロック要素に変化しているという解釈で良いのでしょうか? 2 1の解釈が正しかったとしても、大きな疑問が。 「ボタンタグtest2」 はインライン要素のはずなのに、 heightが効いているのは何故ですか? もしかして、button要素はインライン要素でもありブロック要素でもある的な概念ですか? だとしてもその意味がよく理解できません。 3 ``` .test2 button{ height: 100px; display: block; } .test2 a{ border: 3px solid blue; height: 100px; display: block; } ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/a351adcb75bc57a33f059065dd6580ab.png) このようにした場合、「aタグtest2」のみが画面端から端まで広がるのですが、 何故、「ボタンタグtest2」は広がらないのでしょうか? 規則性がまるでわかりません。 ・columnしたら、「button要素」も「borderで囲ったa要素」も横に広がりheightも効く。 ・flex無しで、普通に「button要素」と「borderで囲ったa要素」に heightを適用させた場合、「button要素」のみに効く。(buttonはインライン要素ではない?) ・flex無しで、「button要素」と「borderで囲ったa要素」をdisplay: block;を適用させた場合、「button要素」と「borderで囲ったa要素」両者がheightは効き、「borderで囲ったa要素」のみが画面端から端まで広がる。 以上、よろしくお願いします。
回答: そもそもブロック要素とは何でしょうか? HTML4 にはブロックレベル要素やインライン要素という分類があってHTMLを書くときに注意を払うこともありましたが、HTML5 では別の分類となっています。 HTML の入れ子のルールは CSS のレイアウトによらず変わりません(要素が変わることはありません)。 レイアウトに関していえば、 CSS Flexible Box Layout Module Level 1 で > > 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. > > > フレックスアイテムの display 値はブロック化されます:フレックスコンテナを生成する要素のフロー内にある子に指定された display がインラインレベルの値であるなら、ブロックレベル相当の値に計算されます。 CSS Display Module Level 3 で、 > > Note: Authors reading this spec may want to skip past the following box-generation and static position details. > > > 詳細を読み飛ばしてもよいと注意書きしたうえで、 > > A parent with a grid or flex display value blockifies the box’s display type. > > > grid または flex の display 値を持つ親は、子の表示タイプをブロック化します。 なお、レンダリングに関しては HTML 仕様でウィジェットという用語で触れていて、button は inline-block のようにレンダリングすることが期待されています。 width を指定したほうがいいでしょう。