调整flex容器中的子代使其内联

如何解决调整flex容器中的子代使其内联

我正在尝试在flex容器导航栏中对齐子级，但是由于某些原因，它们彼此重叠，有人能解释为什么会这样以及如何解决此问题吗？我尝试显示父元素的内联块，但没有任何变化。

.navbar-container {
  background-color: rgb(20,40,92);
  height: 110px;
  display: flex;
}

.navbar-children {
  align-self: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.globe-container {
  position: absolute;
  right: 10%;
  align-self: center;
  
}

.globe-container i {
  color: white;
  font-size: x-large;
}

<div className="navbar-container">
    <img src="logo192.png"></img>

    <div className="navbar-children">
      <input type="text" placeholder="Search City or Zip Code" />
      <button>
        <i class="fa fa-search" aria-hidden="true"></i>
      </button>
    </div>
    <div className="globe-container">
      <i class="fa fa-globe" aria-hidden="true"></i>
      <p>US | F</p>
    </div>
    <div className="bars-icon">
      <button>
        <i aria-hidden="true"></i>
      </button>
    </div>
</div>

这是导航栏：

我正在努力与美国一起发展地球| F排成一行。

解决方法

在.globe-container内添加以下属性。

    display: flex;
    align-items: center;