如何为.logo设置flex-start、#nav-bar设置flex-end实现布局？

你的问题核心是把flex布局的对齐属性用错了层级：你在.logo img和#nav-bar ul上设置justify-content，但这些属性应该作用在它们的父容器（也就是header）上——header才是控制.logo和#nav-bar这两个子元素排列的flex容器。

修正后的CSS代码 #

*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body{
  background-color:#b6eaf1;
  font-family:Cambria, sans-serif;
}

header{
  display:flex;
  top:0;
  width:100%;
  border:5px solid blue;
  /* 关键：让子元素横向分布，logo靠左、nav靠右 */
  justify-content: space-between;
  /* 让子元素垂直居中，避免导航与logo高度不一致导致错位 */
  align-items: center;
}

.logo img{
  width:17vw;
  /* 移除无效的flex相关属性 */
}

img{
  height:100%;
  width:100%;
}

#nav-bar{
  display:flex;
}

#nav-bar ul{
  list-style:none;
  display:flex;
  flex-direction:row;
  height:100%;
  gap:4vw;
  letter-spacing:2.5px;
  /* 移除多余的justify-content:flex-end，父容器已控制nav位置 */
}

#nav-bar li{
  list-style:none;
}

#nav-bar a{
  text-decoration:none;
  color: blue;
}

关键调整点 #

• 给header添加justify-content: space-between：直接让容器内的两个子元素（.logo和#nav-bar）分别靠向左右两端，完美匹配你要的logo靠左、nav靠右的需求，其中左侧就是flex-start的位置，右侧对应flex-end。
• 给header添加align-items: center：确保logo与导航栏在垂直方向上居中对齐，避免高度不一致导致的布局错位。
• 移除.logo img上的display:flex、justify-content:flex-start和align-items:center：这些属性对img替换元素无效，属于冗余设置。
• 移除#nav-bar ul上的justify-content:flex-end：nav的位置已由header控制，ul只需保证内部元素横向排列即可。

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