使用Flexbox构建导航栏时Flex项间距不均的问题解决

我正在尝试用flexbox构建导航栏（纯CSS新手，靠实践学习），现在遇到的问题是：导航栏里的三个flex项——左侧Logo容器、中间小型菜单、右侧搜索框div，中间菜单的左侧间距远大于右侧间距，也就是logo到菜单的空间比菜单到搜索框的大，不知道怎么修复。

我的需求：

• 使用space-between属性
• 确保中间菜单div到左侧和右侧的间距相等

原代码 #

NavBar.js

import React from "react";
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import './NavBar.css';

function NavBar() {
  const heading = 'first heading'
  let list = ['About Us', 'Career Page', 'Resources']

  const BuildList =  () => { 
    return(
      <>
      <div className = 'nav-container'>
      <div className='logo-container'> Logo Container</div>
        <div className='nav-content-container'>
        </div>
        <div className="navbar-primary-menu">
          { list.map((key) => (<div className='navbar-primary-menu-items' key={key}> {key} </div>)) }
        </div>
      <div className="search-container">
      <svg className='search-icon' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 48 48">
<path fill="#616161" d="M34.6 28.1H38.6V45.1H34.6z" transform="rotate(-45.001 36.586 36.587)"></path><path fill="#616161" d="M20 4A16 16 0 1 0 20 36A16 16 0 1 0 20 4Z"></path><path fill="#37474F" d="M36.2 32.1H40.2V44.400000000000006H36.2z" transform="rotate(-45.001 38.24 38.24)"></path><path fill="#64B5F6" d="M20 7A13 13 0 1 0 20 33A13 13 0 1 0 20 7Z"></path><path fill="#BBDEFB" d="M26.9,14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2,1.2-6.9,3.2c-0.4,0.4-0.3,1.1,0.1,1.4c0.4,0.4,1.1,0.3,1.4-0.1C16,13.9,17.9,13,20,13s4,0.9,5.4,2.5c0.2,0.2,0.5,0.4,0.8,0.4c0.2,0,0.5-0.1,0.6-0.2C27.2,15.3,27.2,14.6,26.9,14.2z"></path>
</svg>
        <input className='input-field' type='text'></input>
       </div>
      </div> 
      </>
    );
  };

  return(
    <div>
      <BuildList/>
    </div>
  );
}

export default NavBar

NavBar.css

.nav-container {
  display: flex;
  background: cyan;
  justify-content: space-between;
  align-items: center;
  border: 2px solid black;
  
  width: 100%;
  gap: 10px
}

.list {
  list-style-type: none;
  border: 10px solid yellow;

}

li {
  padding: 5px;
  margin: auto;
  border: 10px  solid red;
}

.logo-container {
  display: flex;
  align-items: center;
  border: 2px solid black;
  margin-left: 2em;

}

.text-box {
  margin-right: 10px;
  margin-left: 20px;
}

.text-box input[type="text"] {
  width: 10px;
}

.navbar-primary-menu {
  display: flex;
  flex-direction: row;  
  justify-content: space-around;
  max-width: 30%;
  border: 2px solid white;

}

.navbar-primary-menu-items {
  border: 2px solid red;
}

.search-container {
  display: flex;
  align-items: flex-end;
  padding: 2px;
  margin-right: 2em;
}

.search-icon {
  border: 2px solid yellow;
 
  max-height: 30px;
  max-width: 30px;
}

.input-field {
  max-height: 100px;
  max-width: 100px;
}

修复方案 #

问题根源是你在nav-container里多了一个空的nav-content-container div，它会打乱flex布局的空间分配；同时中间菜单的宽度设置也限制了它的居中能力。按以下步骤修改：

1. 移除空div：删掉JSX里的<div className='nav-content-container'></div>，让nav-container的直接子项只剩logo、菜单、搜索三个元素。
2. 调整flex项属性：
   • 给logo-container和search-container加flex-shrink: 0，防止它们被压缩变形
   • 给navbar-primary-menu加flex: 1，让它占据logo和搜索框之外的所有可用空间，同时把justify-content改成center，让菜单内容居中

修改后的代码

NavBar.js

import React from "react";
import './NavBar.css';

function NavBar() {
  const heading = 'first heading'
  let list = ['About Us', 'Career Page', 'Resources']

  const BuildList = () => { 
    return(
      <div className='nav-container'>
        <div className='logo-container'> Logo Container</div>
        <div className="navbar-primary-menu">
          { list.map((key) => (<div className='navbar-primary-menu-items' key={key}> {key} </div>)) }
        </div>
        <div className="search-container">
          <svg className='search-icon' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 48 48">
            <path fill="#616161" d="M34.6 28.1H38.6V45.1H34.6z" transform="rotate(-45.001 36.586 36.587)"></path><path fill="#616161" d="M20 4A16 16 0 1 0 20 36A16 16 0 1 0 20 4Z"></path><path fill="#37474F" d="M36.2 32.1H40.2V44.400000000000006H36.2z" transform="rotate(-45.001 38.24 38.24)"></path><path fill="#64B5F6" d="M20 7A13 13 0 1 0 20 33A13 13 0 1 0 20 7Z"></path><path fill="#BBDEFB" d="M26.9,14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2,1.2-6.9,3.2c-0.4,0.4-0.3,1.1,0.1,1.4c0.4,0.4,1.1,0.3,1.4-0.1C16,13.9,17.9,13,20,13s4,0.9,5.4,2.5c0.2,0.2,0.5,0.4,0.8,0.4c0.2,0,0.5-0.1,0.6-0.2C27.2,15.3,27.2,14.6,26.9,14.2z"></path>
          </svg>
          <input className='input-field' type='text'></input>
        </div>
      </div> 
    );
  };

  return(
    <div>
      <BuildList/>
    </div>
  );
}

export default NavBar

NavBar.css

.nav-container {
  display: flex;
  background: cyan;
  justify-content: space-between;
  align-items: center;
  border: 2px solid black;
  width: 100%;
  gap: 10px;
}

.logo-container {
  display: flex;
  align-items: center;
  border: 2px solid black;
  margin-left: 2em;
  flex-shrink: 0; /* 防止被压缩 */
}

.navbar-primary-menu {
  display: flex;
  flex-direction: row;  
  justify-content: center; /* 菜单内容居中 */
  gap: 1em; /* 菜单项间距更可控 */
  flex: 1; /* 占据剩余所有空间 */
  border: 2px solid white;
}

.navbar-primary-menu-items {
  border: 2px solid red;
}

.search-container {
  display: flex;
  align-items: flex-end;
  padding: 2px;
  margin-right: 2em;
  flex-shrink: 0; /* 防止被压缩 */
}

.search-icon {
  border: 2px solid yellow;
  max-height: 30px;
  max-width: 30px;
}

.input-field {
  max-height: 100px;
  max-width: 100px;
}

/* 原代码里没用的样式可以删掉 */
/* .list, li, .text-box 相关样式已移除 */

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