ReactJS开发中如何通过CSS将导航栏内的列表向右对齐

你设置的justify-content: flex-end不生效，是因为navbar-links作为导航栏flex布局的子项，默认宽度仅刚好包裹内部的列表内容，没有多余的留白空间供右对齐规则生效。
只需修改.navbar-links的样式，添加flex: 1属性让其占满导航栏logo之外的所有剩余宽度即可：

/* 此处为列表对应的容器div样式 */
.navbar-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 新增两行样式 */
    flex: 1;
    padding-right: 50px; /* 与左侧logo的左内边距对应，保持左右边距视觉统一 */
}

另外你当前给导航列表项设置的padding: 0 5% 0 5%是相对父元素宽度计算的，窗口尺寸变化时列表项的间距会跟着波动，建议改成固定像素值（如padding: 0 20px），显示效果会更稳定。

内容的提问来源于stack exchange，提问作者Michael-Liendo