是否可以使页面上的所有元素都显示:flex(flexbox)?

时间:2013-10-30 09:17:02

标签: css css3 flexbox

我想将flexbox用于app,并希望设置所有元素:display:flex。那可能吗?如果有,怎么样?我已经设置了body {display:flex},但它仍然不适用于所有的body元素。

1 个答案:

答案 0 :(得分:7)

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

universal selector可以解决问题:

body * { display: flex; } 

(请注意,我将其限定为仅包含body

中的元素

通用选择器可以lead to (negligible, tiny, almost immeasurable) performance issues,但它是迄今为止最简单的做法(假设display属性未被继承)。另一个选项(由大量所有HTML列表组成的选择器)也需要相当长的时间来下载和解析!至于最佳实践,我认为它们中的任何一个都不是特别棒的想法,但我不知道您的实施细节。

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