如何使用Flexbox将导航栏右对齐？现有代码问题排查

开发者阿泽

2026-10-3

问题原因

你混淆了Flex布局的垂直和水平方向控制属性，且未设置正确的水平对齐规则，具体问题如下：

Flex容器.container仅设置了垂直对齐align-items: center，未配置水平分布规则，默认所有子元素都会左对齐排列。
给.site-logo设置的align-items: flex-start无效：align-items是Flex容器的属性，仅作用于容器的直接子元素，且该属性控制的是垂直方向对齐，不是水平方向。
给.top-bar设置的align-self: flex-end是控制子元素在垂直方向的对齐方式，无法实现水平靠右的效果。

修复方案

推荐两种实现方式，二选一即可：

方案1：给Flex容器设置两端对齐

修改CSS如下：

header .container {
    height: 20%;
    z-index: 99;
    display: flex;
    align-items: center;
    /* 新增：水平方向两端对齐，两个子元素分别靠左右 */
    justify-content: space-between;
}

header .container .site-logo {
    /* 删掉无效的align-items:flex-start */
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
    /* 删掉无效的align-self:flex-end */
    margin: 0;
    padding: 0;
}

方案2：给导航栏设置左自动边距（更推荐，避免logo和导航间距过大）

如果不需要logo和导航中间留满空白，用这个方案更灵活：

header .container {
    height: 20%;
    z-index: 99;
    display: flex;
    align-items: center;
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
    /* 新增：左侧自动撑满剩余空间，自动将导航推到最右侧 */
    margin-left: auto;
    /* 清除ul默认的内外边距避免错位 */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}