媒体查询场景下如何重置display属性，取消inline-flex实现div纵向排列

两个核心问题分别是display: initial的生效逻辑不符合预期，以及样式优先级不足导致display:block没有覆盖原有设置，对应解决方案如下：

• 修正属性值用法：display: initial的作用是将属性重置为CSS规范定义的全局初始值，而display的全局初始值是inline，并不是div元素的浏览器默认块级属性，因此无法满足需求。如果希望回退到浏览器默认的元素样式，可使用display: revert，该值会直接沿用用户代理样式表（浏览器内置样式）中对应元素的display属性值，div元素调用后会自动恢复为block。
• 解决display:block不生效问题：该场景下规则不生效基本由选择器优先级不足导致。需要保证媒体查询内的选择器优先级等于或高于原来设置display: inline-flex的选择器，同时媒体查询代码要写在原有普通样式的后方，才能正确覆盖原有设置。
  参考代码示例：

  /* 原有设置inline-flex的样式 */
  .card-item {
    display: inline-flex;
    margin-right: 16px;
  }
  
  /* 媒体查询代码，选择器和原有保持一致，写在原有样式后方 */
  @media (max-width: 768px) {
    .card-item {
      /* 两种写法二选一即可 */
      display: block;
      /* display: revert; */
      margin-right: 0;
      margin-bottom: 16px;
    }
  }
  

• 排查方法：打开浏览器开发者工具的元素样式面板，查看你写的display:block规则是否被划横线标注，如果是则代表被更高优先级的规则覆盖，调整选择器权重即可解决。

内容的提问来源于stack exchange，提问作者tagjami