Is it possible to make all elements on the page a display: flex (flexbox)?

Question

I want to use flexbox for an app, and want all elements to be set do display: flex. Is that possible? if yes, how? I have alread set body { display: flex }, but it still does not apply to all body elements.

Answer 1

(我接受了我的评论并将其转化为答案)

该通用选择会做的伎俩:

body * { display: flex; } 

(请注意,我将它限定为仅包含其中的元素body)

通用选择器可以导致(可忽略的,微小的,几乎无法估量的)性能问题,但它是迄今为止最简单的方式来执行您所要求的(假设该display属性不是继承的).另一个选项(由大量所有HTML列表组成的选择器)也需要相当长的时间来下载和解析!至于最佳实践,我认为它们中的任何一个都不是特别棒的想法,但我不知道您的实施细节.

该display属性不是继承的,因为它会造成严重破坏!例如,<a>元素是内联元素.如果它继承display: block;自它的父元素,则所有链接都是全宽并导致换行符(如a p,h1或div).(相当复杂的)CSS2规范的继承位在这里:http://w3.org/TR/CSS2/cascade.html#inheritance