为什么 window.getComputedStyle(element).getPropertyValue("order") 不返回 flexbox 元素的顺序？

Question

来自MDN Web Docs：“window.getComputedStyle() 方法在应用活动样式表并解决这些值可能包含的任何基本计算后，返回一个包含元素所有 CSS 属性值的对象。”

Window.getComputedStyle() 返回一个 CSSStyleDeclaration 对象，其中包含包含所有 CSS 属性名称的键值对。要获取特定 CSS 属性的解析值，可以使用 getPropertyValue("property-name")。但是，window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order") 将弹性框中的元素与类.box1 的顺序返回为“0”。实际上，它会将 flexbox 中每个元素的顺序返回为“0”。

JS Fiddle的链接：https://jsfiddle.net/asxyzp/h6b3j5dL/

附加上下文：我试图向我的项目 (https://flexgrid.asxyzp.repl.co/ref?platform=so) 添加工具提示，使用 tippy.js 为每个使用 tippy('.box1',{content:``CLASS: .box1, ORDER : ${window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order")}``}); 的 flexbox 元素创建工具提示，以便显示flexbox 元素的顺序是动态的，即使进行了更改，但它不起作用，所以我尝试在小提琴中进行，但即使在那里我也将元素的顺序设为 0。

Answer 1

你还没有在元素上设置ordercss规则，

尝试添加：

.box3 {
  order: 1;
}

或：

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

Fiddle

Order属性默认为0
当有多个 flex 孩子时
顺序相同
它们按它们在 DOM（或 HTML）中的顺序显示。