移动端优先开发的CSS Flex导航栏大屏布局错位问题求解

核心实现逻辑：无需修改现有HTML元素顺序，仅通过Flex布局属性调整大屏下的元素排列，不会影响原有移动端布局效果。

修改后的媒体查询代码 #

@media screen and (min-width: 646px) {
    nav{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    /* 移除原重复的.nav样式，避免样式冲突 */
    .row{
        order: 0;
        flex-shrink: 0;
    }
    .column{
        order: 1;
        flex: 1;
        flex-direction: row;
        justify-content: flex-end;
        margin-right: 15px; /* 可根据实际需求调整和logo的间距 */
    }
    .navbar{
        list-style: none;
        display: flex;
        gap: 24px; /* 可调整导航项之间的间距 */
        justify-content:flex-end;
    }
    .hamburger-menu{
        display: none;
    }
    .right{
        display: flex;
        align-items: center;
        justify-content:flex-end;
    }
    .left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 20px;
    }
}

调整说明 #

• order属性仅在大屏媒体查询内生效，调整nav下两个section的排列顺序，完全不改变移动端的DOM结构和布局表现
• flex: 1给导航项容器分配logo和左侧功能区中间的剩余宽度，保证导航项有足够空间横向排列
• RTL布局下设置justify-content: flex-end让导航项靠右对齐，紧挨着左侧的logo
• gap属性统一控制导航项之间的间距，无需单独给li元素设置外边距

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