css - ページ上のすべての要素をディスプレイ: flex (フレックスボックス) にすることは可能ですか?

Question

アプリに flexbox を使用したいのですが、すべての要素を display: flex に設定したいと考えています。それは可能ですか？はいの場合、どのように？body { display: flex } を設定しましたが、まだすべての body 要素に適用されるわけではありません。

Answer 1

（私は自分のコメントを受け取り、それらを答えに変えました）

ユニバーサルセレクターはトリックを行います：

body * { display: flex; } 

( 内の要素のみを含めるようにスコープを設定したことに注意してくださいbody)

ユニバーサル セレクターは(ごくわずかで、ほとんど計り知れない) パフォーマンスの問題displayを引き起こす可能性がありますが、(プロパティが継承されていないことを考えると) あなたが要求したことを実行する最も簡単な方法です。もう 1 つのオプション (すべての HTML の膨大なリストで構成されるセレクター) 要素も、ダウンロードと解析にかなりの時間がかかります。ベストプラクティスに関しては、どちらも特に素晴らしいアイデアではないと思いますが、実装の詳細はわかりません。

大display混乱を招くため、プロパティは継承されません。たとえば、<a>要素はインライン要素です。親要素から継承display: block;した場合、すべてのリンクは全幅になり、改行が発生します ( p、h1または などdiv)。(かなり複雑な) CSS2 仕様の継承ビットはこちら: http://w3.org/TR/CSS2/cascade.html#inheritance