cssの「display」が新しい2値構文に。「display: block flow」とは？

「display」プロパティが2値構文が使えるということで調べてみました。

結論から言うと、「今すぐ何かしないといけない」とか「新しくなにかできるメリット」などはありません。
　

それぞれの 2 値版は旧来版に直接マッピングされているので、 2 値版を使用するメリットは今のところありません。

引用：display の古い値について

・・・なるほど。

・・・メリットなしか。

とはいえ今後、戸惑わないためにも概要を調べました。

「display:block」は「display:block flow」というような、2値構文の書き方ができるようになります。

1つ目の値は「ブロック要素」なのか「インライン要素」なのか指定します。
設定できる値は

inline, block, run-in
です。

2つ目の値は内側の「レイアウト」方法を指定します。
設定できる値は

flow,flow-root,table,flex,grid,ruby
です。

この2つ目の値のデフォルトは「flow」で、それは「フローレイアウト」になります。
並べるだけと想像すると分かりやすいかもしれません。

つまり「display:block」は「display:block flow」ということになります。

それ以外の今までの値と新しい値を比べると使い方が想像しやすいです。

単一の値新しい値
blockblock flow
inlineinline flow
inline-blockinline flow-root
flexblock flex
inline-flexinline flex
gridblock grid
inline-gridinline grid
flow-rootblock flow-root

今回は、ChromeとEdgeは7月リリース予定の115でサポートされ、SafariとFirefoxでは既にサポート済みのdisplayの新しい2値構文の書き方について紹介しました。

コメント