如何用Flexbox实现标题居中且导航栏居右布局？

问题原因 #

你的布局里，header--container的直接子元素是两个<Link>标签，而非h1和nav。用justify-content: space-between只会让这两个Link沿容器两端排布，导致h1仅在自身Link容器内居中，而非整个header的中心。之前给h1加margin-right:auto无效，是因为这个样式作用在Link的子元素上，无法影响header容器的主轴布局。

解决方案（Flexbox最佳实践） #

通过调整Link的flex属性，让标题所在的Link占据容器剩余空间，从而实现标题居中、导航居右的效果：

修改后的React代码

import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header className='header--container'>
      <Link to='/' className='header--title-link'>
        <h1 className='header--title'>Cocktail Connaisseur</h1>
      </Link>
      <Link to='/cocktails/a'>
        <nav className='header--nav'>
          <p>All Cocktails</p>
        </nav>
      </Link>
    </header>
  );
};

export default Header;

修改后的CSS代码

/*Header Styling */

.header--container {
  background-color: #55505c;
  padding: 15px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  /* 移除justify-content: space-between，改用flex属性分配空间 */
}

.header--container>a {
  text-decoration: none;
}

/* 让标题所在的Link占据容器剩余空间 */
.header--title-link {
  flex: 1;
}

.header--title {
  margin: 0;
  color: #e8e9f3;
  font-size: 1.5em;
  text-align: center;
}

.header--nav {
  align-self: flex-end; /* 保留导航靠底部的样式，不需要可删除 */
  /* 移除margin-left: auto，因为flex:1已经让标题Link占满剩余空间 */
}

.header--nav>p {
  margin: 0;
  color: #e8e9f3;
}

原理说明 #

给标题的Link添加flex:1，意味着它会占据header容器中除导航Link之外的所有剩余空间。此时h1的text-align:center会让标题在这个占满的空间里居中，而导航Link则自然被挤到容器右侧，完美实现你想要的布局效果。

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