是否可以使页面上的所有元素显示：flex（flexbox）？ [英] Is it possible to make all elements on the page a display: flex (flexbox)?

问题描述

我想为应用程序使用flexbox，并且希望所有元素都设置为display：flex。那可能吗？如果是，如何？我已经alread set body {display：flex}，但它仍然不适用于所有的body元素。

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.

推荐答案

（我采纳了我的意见并将其变成了答案）

(I took my comments and turned them into an answer)

通用选择器可以执行以下操作：

body * { display: flex; } 

（注意，我将范围限定为只包括身体）

(Note that I've scoped it to only include elements within the body)

通用选择器可以，但它是迄今为止最简单的做你所问的方式（假设 display 属性不被继承）。另一个选项（一个由大量列表的所有HTML元素组成的选择器）将需要相当长的时间来下载和解析！至于最佳实践，我不认为他们是一个特别棒的想法，但我不知道你的实现的细节。

The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues, but it's by far the simplest way of doing what you asked (given that the display property isn't inherited). The other option (a selector consisting of a massive list of all HTML) elements would take quite a long time to download and parse, too! As for best practise, I don't think either of them is a particularly awesome idea, but I don't know the details of your implementation.

显示属性不会继承，因为它会造成严重破坏！例如，< a> 元素是内联元素。如果它从它的父元素继承 display：block; ，所有链接将是全宽，并导致换行符（如 p ， h1 或 div ）。 （相当复杂的）CSS2规范的继承位在这里： http://w3.org /TR/CSS2/cascade.html#inheritance

The display property isn't inherited because it would wreak havoc! For example, the <a> element is an inline element. If it inherited display: block; from it's parent elements, all links would be full width and cause a line break (like a p, h1 or div). The inheritance bit of the (rather complicated) CSS2 spec is here: http://w3.org/TR/CSS2/cascade.html#inheritance

这篇关于是否可以使页面上的所有元素显示：flex（flexbox）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！