我的Flex CSS标签不生效，div无法横向排列该如何解决？

问题原因 #

你遇到的flex布局不生效是两个CSS优先级和属性覆盖的问题导致的：

1. 单选框选中后激活tab的样式里，你用display: block直接覆盖了.tab元素原本设置的display: flex属性，flex布局根本没有生效，自然只能按块级元素默认的单列排列
2. 桌面端媒体查询里的.tab选择器优先级低于默认样式里的.container .tab，就算flex生效，flex-direction: row也不会被应用

修复步骤 #

1. 替换tab激活样式的display属性
   找到这段代码：

.container input[type='radio']:checked + label + .tab {
    display: block;
}

修改为：

.container input[type='radio']:checked + label + .tab {
    display: flex;
}

2. 提升媒体查询里选择器的优先级，还可以添加对齐和间距属性优化显示效果
   找到这段代码：

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

修改为：

@media (min-width: 850px){
    .container .tab {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 48px;
    }
}

3. 补全全局通用选择器的左大括号（你当前代码里*后面漏掉了{，会导致全局重置样式失效）
   找到这段代码：

*
    
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    
} 

修改为：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
} 

修改完成后，桌面端宽度大于850px时，个人资料卡的头像和文字就会横向排列，移动端依然保持单列布局，符合你的预期。

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