使用 Flexbox 时 Flex 项目之间的间距不均匀

Question

导航栏.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> 
      </>
    );
  };
  // const element = <ul> <li>Hello there</li></ul>

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


export default 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;
}

我正在尝试使用 Flexbox 构建一个导航栏。 （我是个初学者，不太了解 css，正在尝试一些东西来理解 css）

但问题是，如附图所示的弹性项目是

1. 左侧的徽标容器
2. 中间有一个小菜单
3. 右侧有一个搜索框div。

我遇到的问题是，

“中间的小菜单”div 左侧空间较多，右侧空间较少。即从徽标容器到“小菜单”的空间更多。不知道怎么解决

我正在尝试做什么：

1. 使用空格
2. 确保中间菜单 div 到左侧的空间和中间菜单 div 到右侧的空间相同。

（我提到的不均匀间隙是图像中显示的带有条纹的蓝色间隙）

有人可以帮助我了解如何做到这一点吗？

Answer 1

如果您使用空格进行调整，则需要删除“nav-content-container”div。

“导航容器”div 中应该有 3 个 div，而不是 4 个。

探索 justify-content 的工作原理： https://www.w3schools.com/cssref/css3_pr_justify-content.php