Media Query不生效：flex-direction无法被覆盖的问题求助

我是网页设计新手，尝试在屏幕宽度达到650px时，将.flex-group类的flex-direction从column改为row，但媒体查询的属性在开发者工具中被划掉，无法覆盖原有样式。

相关代码 #

HTML代码

<div class="flex-group">
    <div class="stat1">
        <h2>10k+</h2>
        <p>companies</p>
    </div>
    <div class="stat2">
        <h2>314</h2>
        <p>templates</p>
    </div>
    <div class="stat3">
        <h2>12M+</h2>
        <p>queries</p>
    </div>
</div>

CSS代码

.flex-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    font-size: 1rem;
    margin-top: 1rem;
}

@media (min-width:600px) {
    .flex-group {
        flex-direction: row;
    }
}

解决方法 #

• 修正媒体查询断点：你需求是650px触发样式变更，但当前代码里的断点是min-width:600px，和需求不符。把媒体查询的断点改成min-width:650px，确保在目标宽度下触发。
• 检查样式优先级：属性被划掉意味着有更高优先级的样式覆盖了它：
  • 排查是否存在更具体的选择器（比如.parent .flex-group）设置了flex-direction: column；
  • 检查基础样式里是否用了!important强制column，如果有，媒体查询里的row也需要加!important才能覆盖（不推荐滥用，优先调整选择器的特异性）。
• 调整样式顺序：CSS遵循“后定义优先”规则，确保媒体查询代码写在基础.flex-group样式的后面，否则基础样式会覆盖媒体查询的设置。

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