如何使用Flexbox实现导航栏居右定位？附代码求助

Hey there! 我来帮你搞定导航栏靠右的问题～ 结合你的HTML结构（header里包含.logo和nav），给你整理几个可行的解决方法，再说说最优方案为啥靠谱：

1. Flexbox（首推方案） #

这是现在前端布局的主流玩法，灵活又省心，还能顺便搞定垂直对齐的问题。

给你的<header>加这段CSS就行：

header {
  display: flex;
  justify-content: space-between; /* 让logo和nav分别贴左右两端 */
  align-items: center; /* 让元素垂直居中，看起来更美观 */
  padding: 0 20px; /* 可选，避免内容贴在页面边缘 */
}

写完刷新页面，你会发现logo自动靠左，nav乖乖靠右，完全不用折腾其他元素的样式。

2. Float（传统老方法） #

这是以前常用的布局方式，虽然能用，但需要注意清除浮动的坑：

header {
  overflow: hidden; /* 触发BFC，解决浮动导致的header高度塌陷问题 */
  padding: 0 20px;
}

.logo {
  float: left; /* 把logo拉到左边 */
}

nav {
  float: right; /* 把导航推到右边 */
}

这种方法的问题是，如果后续要调整垂直对齐，得额外加margin或者line-height，而且响应式适配的时候不如Flexbox灵活。

3. CSS Grid（现代备选方案） #

Grid也是很强的布局工具，适合复杂布局，但用来做简单的左右分布也很顺手：

header {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余空间，第二列跟着内容走 */
  align-items: center;
  padding: 0 20px;
}

这个方法也简洁，但如果只是做左右分布，Flexbox的代码可读性会更高一点。

为啥首推它？理由很实在：

• 代码简单好维护：只需要给header加3行核心样式，逻辑一目了然，后续改起来也方便。
• 无布局bug：不像Float那样要处理塌陷问题，省了很多排查麻烦。
• 响应式适配轻松：以后做移动端适配（比如把导航改成汉堡菜单），基于Flexbox调整非常顺滑。
• 兼容性拉满：现在几乎所有主流浏览器都完美支持，不用操心兼容问题。

直接把Flexbox的代码加到你的style.css里，应该就能立刻看到效果啦～

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