为何window.getComputedStyle获取flex元素的order属性始终返回0

问题根因 #

• 布局规则限制：order属性仅对flex、grid布局的直接子元素生效。如果子元素的直接父元素未正确设置display: flex或display: inline-flex，order属性不会生效，默认值固定为0
• 样式覆盖：你编写的设置order的CSS选择器优先级不足，被更高优先级的样式规则覆盖，最终元素生效的order值为默认的0
• 静态值绑定：原有tippy初始化代码仅在组件初始化时计算一次order值并固定写入提示内容，后续你修改元素order属性时，提示内容不会自动同步更新

解决步骤 #

第一步：排查样式生效问题 #

打开浏览器开发者工具，选中对应flex子项，切换到「计算样式」面板核对：

1. 先检查子项的直接父元素的display属性是否为flex或inline-flex，如果不是则调整父元素的CSS配置
2. 再检查子项本身的order属性值，如果此处也显示为0，说明你的order配置规则未生效，需要提升对应CSS选择器的优先级

第二步：调整tippy配置实现实时更新 #

tippy支持将content参数设置为函数，每次触发提示框时都会重新执行函数获取最新内容，修改代码如下即可实现order值实时同步：

tippy('.box1', {
  content() {
    // this指向当前触发提示的元素，适配多个同类名元素的场景
    const currentOrder = window.getComputedStyle(this).getPropertyValue('order')
    return `CLASS: .box1, ORDER : ${currentOrder}`
  }
})

内容的提问来源于stack exchange，提问作者Aashish Loknath Panigrahi