Why does window.getComputedStyle(element).getPropertyValue(“order”) doesn’t returns order of a flexbox element?

From MDN Web Docs: “window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.”

Window.getComputedStyle() returns a CSSStyleDeclaration object which contains key-value pairs containing names of all the CSS properties. To get the resolved value of a particular CSS property, getPropertyValue("property-name") can be used. But, window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order") is returning the order of element w/ class .box1 in the flexbox as “0”. Infact, it’s returning the order of every element inside flexbox as “0”.

Link to JS Fiddle: https://jsfiddle.net/asxyzp/h6b3j5dL/

Additional context: I was trying to add tooltip to my project (https://flexgrid.asxyzp.repl.co/ref?platform=so), using tippy.js which creates a tooltip for every flexbox element using tippy('.box1',{content:``CLASS: .box1, ORDER : ${window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order")}``}); so that it would display the order of the flexbox element dynamically, even when changes are made, but it didn’t work, so I tried to do it in fiddle, but even there I was getting the order for elements as 0.

Answer

You haven’t set order css rule on the element,

Try adding:

.box3 {
  order: 1;
}

or:

.box1 { order: 1 }
.box2 { order: 2 }
.box3 { order: 3 }
.box4 { order: 4 }

Fiddle

Order property is 0 by default
when there are multiple flex children
with the same order
they are displayed by their order in the DOM (or HTML).