如何在css中对导航栏进行左右对齐

Question

我正在尝试在reactjs中为导航栏进行左右对齐，但我不知道如何为右侧图标进行左右对齐。图标保持垂直，我想学习如何将它们分成左右部分。这是我到目前为止的代码。非常感谢您的帮助。

const Home = () => {
  return (
    <>
        <section className='navbar-container'>
            <div className='navbar_left'>
                   <div className='logo'>
                            <img src={logo} alt=''/>
                   </div>
                   <div className='searchbox'>
                             <input type='text' placeholder='Search for products...'/>
                             <button type="submit"><i><Fas.FaSearch/></i>
                             </button> 
                   </div>
            </div>
            <div className='navbar_right'>
                  <div className='cart'>
                           <i><Fas.FaShoppingCart/>Carrito</i>  
                  </div>
                  <div className='delivery'>
                           <i><Delivery.CiDeliveryTruck/>Pedidos</i>
                  </div>
                  <div className='login'>
                           <button type='submit'>Acceder</button>
                  </div>
            </div>
        </section>
    </>
  )
}

export default Home

#css
.navbar-container{
    background-color: #2c143e;
    width: 100%;
    height: 100%;
}

.navbar-left{
    width: 100%;
    display: flex;

}

img{
    width: 10%;
    height: 100px;

}

这是我的图像： 证据

Answer 1

您也可以始终在中间放置一个占位符，并用百分比定义每个元素的空间。