display:flexとinline:blockの違いについて

Question

inline-blockとdisplay:flexの違いはなんでしょうか？

Comments

[miyabi_pudding]

自身で調べましたか？
使ってみましたか？

Answer 1

display: inline-blockはインラインレベルのブロックコンテナになります。それ自身はインラインレイアウトに参加しますが、ブロック整形コンテキストを生成するので、内部にブロックレイアウトを持つことができるものです。

また、幅・高さ・垂直方向のマージンやパディング・内在サイズ・ベースラインの定義などについて、別の規則があります。

---

display: flexは、ブロックレベルのフレックスコンテナになります。それ自身はブロックレベルレイアウトに参加しますが、フレックス整形コンテキストを生成します。

---

推測ですが、要素を横並びにするときにどのように使い分けるのか、ということが聞きたいのではありませんか？

大雑把に言うと、フレックスはその整形コンテキスト内でアイテムを横並びにするのに対して、インラインブロックはインライン整形コンテキストに参加することによって自身が横並びになります。
ですので、そのスタイルを付する要素が違う（フレックスは親要素に、インラインブロックは子要素に）ということになります。

---

ここまでの説明を読んで「何言ってるのか全然わからない」という感じの場合は、これだけ覚えて帰ってください。

inline-block のことは忘れろ。

以上です。

Answer 2

display
block -> flex
inlina-block -> inline-flex