flex-direction: column; とインライン要素の関係が知りたい

Question

環境：MacBook Pro　Chrome　Atomエディタ

flex-direction: column; にすると、インライン要素はブロック要素に変化するのでしょうか？

コード

<div class="test1">
  <button type="button">ボタンタグtest1</button>
  <a href="#">aタグtest1</a>
</div>

<div class="test2">
  <button type="button">ボタンタグtest2</button>
  <a href="#">aタグtest2</a>
</div>

.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;
}

↑このコードのブラウザ画面

以下、質問内容になります。

①　インライン要素がブロック要素に変化したと思った理由。
columnにすると、「ボタンタグtest1」と、borderで囲った「aタグtest1」が、
・画面の端から端まで広がる
・heightが効いている。
以上の事から、ブロック要素に変化しているという解釈で良いのでしょうか？

②　①の解釈が正しかったとしても、大きな疑問が。
「ボタンタグtest2」 はインライン要素のはずなのに、
heightが効いているのは何故ですか？
もしかして、button要素はインライン要素でもありブロック要素でもある的な概念ですか？
だとしてもその意味がよく理解できません。

③

.test2 button{
  height: 100px;
  display: block;
}
.test2 a{
  border: 3px solid blue;
  height: 100px;
  display: block;
}　

このようにした場合、「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要素」のみが画面端から端まで広がる。

以上、よろしくお願いします。

Answer 1

順番に回答します。

①ブロック要素に変化しているという解釈で良いのでしょうか？

はい。そうです。
しかし、

＞・画面の端から端まで広がる

これは「ブロック要素に変化」したからではなく、親要素のflex（flex-direction: column;）により、「align-items: stretch;」が初期値のためストレッチ効果で広げられています。
例えば、初期値以外の「align-items: flex-start;」を設定すると、広がらないので分かるかと思います。

---

②　①の解釈が正しかったとしても、大きな疑問が。･･･

もしかして、button要素はインライン要素でもありブロック要素でもある的な概念ですか？

button要素は、少し特殊で、インライン要素ですが、「インラインブロック要素」みたいな部分もあります。

---

③何故、「ボタンタグtest2」は広がらないのでしょうか？

見た目は違いますが、「ボタンタグtest2」要素は広がっています。なので「aタグtest2」が横並びから、縦並びになっています。

見た目が広がって見えないのはブラウザによるデフォルトスタイルが適用されているからです。

Answer 2

そもそもブロック要素とは何でしょうか？
HTML4 にはブロックレベル要素やインライン要素という分類があってHTMLを書くときに注意を払うこともありましたが、HTML5 では別の分類となっています。
HTML の入れ子のルールは CSS のレイアウトによらず変わりません(要素が変わることはありません)。

レイアウトに関していえば、
CSS Flexible Box Layout Module Level 1 で
https://www.w3.org/TR/css-flexbox-1/#flex-items

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 で、
https://www.w3.org/TR/css-display/#transformations

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 を指定したほうがいいでしょう。
https://html.spec.whatwg.org/multipage/rendering.html#widgets

Comments

[yoshinavi]

＞そもそもブロック要素とは何でしょうか？
HTML4 にはブロックレベル要素やインライン要素という分類があってHTMLを書くときに注意を払うこともありましたが、HTML5 では別の分類となっています。

→　確かにHTML5では「ブロックレベル要素やインライン要素」の分類がなくなりましたが、考え自体は継承されており、また、cssでの分類がなくなってはいないので、便宜上、簡潔に「ブロック要素・インライン要素」の呼称でも、実際のレイアウトには支障はなく、意味はとおりやすいかと、思っております。

[x_x]

HTML4 で使っていたのと同じ「インライン要素」を別の意味で使えば混乱しませんか？
実際フレックスアイテムは要素である必要はなく匿名のボックスかもしれません。
CSS仕様ではきちんとブロックレベル、インラインレベルなどの用語で言っているわけですが、MDNでの記述が誤解を招いているのでしょうか？
https://www.w3.org/TR/css-display/#glossary

[yoshinavi]

HTML5で「ブロックレベル要素やインライン要素」の分類をなくしたのが混乱の原因かと、個人的には思います。
いちいち「フローコンテンツとは、従来のブロックレベル要素であり、CSSでは、従来どおりのブロックレベルに変わりはありません」等の説明をしなければ、理解が追い付いていかないのではと思います。

確かに、HTML5の考えで行けば、「フロー」や「フレージング」が従来の呼称に該当はしますが、他の意味合いも持たせたかったので、新名称にしたのかと、思えるところはあります。

そして、CSSで「display:block;」や「display:inline;」の記述をするところから、単に「ブロック（レベル）要素」や「インライン（レベル）要素」と簡潔に略しても、実際のコーディング時に大きな支障とならないので、その辺りから、きているのではないのでしょうか？

せっかく覚えた単語呼称を、HTMLの仕様変更の都度に変更するのを嫌がっているのも、あるのかもしれません。
例えば、これは「フローコンテンツ」「ブロックレベル」と区分けするよりも、単に「ブロック要素」と一括りにしているだけが、現状ではないのでしょうか。