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.
Asked
Active
Viewed 3,987 times
6
-
1Wouldn't the [universal selector](http://meyerweb.com/eric/articles/webrev/200006a.html) do the trick? `* { display: flex; }` – Olly Hodgson Oct 30 '13 at 10:52
-
1. Wouldnt that lead to performance issues? 2. Is it better practice than applying display:flex to every tag? – Andreas Oct 30 '13 at 14:59
-
21. Yes, it probably would 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). 2. It strikes me that 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. – Olly Hodgson Oct 30 '13 at 15:32
-
Benchmark it and find out? There's not a whole lot of effort here behind this question. – cimmanon Oct 30 '13 at 19:51
-
Thanks for a great answer @OllyHodgson. Why are not display property inherited? – Andreas Oct 31 '13 at 09:36
-
@AndyH Because it would wreak havoc :) The `` 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 rather complicated CSS2 spec is here: http://www.w3.org/TR/CSS2/cascade.html#inheritance – Olly Hodgson Oct 31 '13 at 10:57
-
1I can't think of a legitimate reason to be applying `display: flex` to every single element. What problem are you trying to solve? Why *must* everything be a flex container? If performance is such a concern, don't do it until you have a very good reason to do so. – BoltClock Oct 31 '13 at 11:08
-
@BoltClock like many other platforms. Layout consistancy. – Oliver Dixon Dec 25 '20 at 22:18
-
@Oliver Dixon: I disagree. Not everything needs to be a flex container for layout consistency. If anything I'd say it introduces more inconsistencies than fixes them. – BoltClock Jan 14 '21 at 04:48
2 Answers
10
(I took my comments and turned them into an answer)
The universal selector would do the trick:
body * { display: flex; }
(Note that I've scoped it to only include elements within the body)
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.
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
Community
- 1
- 1
Olly Hodgson
- 15,076
- 3
- 40
- 60
-
5You'll want to limit the scope to elements within `body` at least, otherwise `head` and all its contents will have the same `display: flex` style applied to them, and depending on the browser this may or may not have unwanted side effects. See http://stackoverflow.com/questions/12126320/firefox-and-ie-put-padding-margins-on-link-elements-and-weirdness-with-clear/12126353#12126353 – BoltClock Oct 31 '13 at 11:11
-
Thanks @BoltClock, very good point. I've adjusted the answer accordingly! – Olly Hodgson Oct 31 '13 at 11:14
0
body { display: flex; } it will not work because it means apply flex to body.
instead
- {display: flex;} it means apply flex to all element(selectors) in page. however I faced issue if using live server because it will apply flex to element also which is automatically applied to code editor(mine is vs code).
you can use this method
anyelement,.anyclass,#anyelement {display:flex;} adding comma after selectors means apply flex to all element which is written.
Vishal Kumar
- 1
- 1