左对齐一个孩子，其余右对齐div

Question

尝试将3个图标向右对齐，同时将标题保持在左侧：

似乎无法使其正常工作。 自我辩护：没有结果。 右移：自动生成：

代码：

    <div className="nav-header-container">
      <span className="nav-header">TITLE</span>
      <img
        className="nav-header-icon"
        src="http://localhost:8000/static/frontend/icons/bell.svg/"
      />
      <img
        className="nav-header-icon"
        src="http://localhost:8000/static/frontend/icons/chat.svg/"
      />
      <img
        className="nav-header-icon"
        src="http://localhost:8000/static/frontend/icons/settings.svg/"
      />
    </div>

CSS：

.nav-header-container {
  display: flex;
  align-items: center;

  min-height: 4.26vh;
  width: 100%;

  padding-left: 1em;

  background-color: #435665;
}

.nav-header {
  font-family: open-sans, sans-serif;
  font-size: 20px;
  color: white;
}

.nav-header-icon {
  height: 20px;

  /* justify-self: flex-end; */
  margin-left: auto;
}

Answer 1

将图标包装在div中，然后转到justify-content: space-between;

html

 <div className="nav-header-container">
  <span className="nav-header">TITLE</span>
  <div class="nav-header-icons">
   <img
     className="nav-header-icon"
     src="http://localhost:8000/static/frontend/icons/bell.svg/"
   />
   <img
     className="nav-header-icon"
     src="http://localhost:8000/static/frontend/icons/chat.svg/"
   />
   <img
     className="nav-header-icon"
     src="http://localhost:8000/static/frontend/icons/settings.svg/"
   />
 </div>
</div>

css

.nav-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 4.26vh;
  width: 100%;

  padding-left: 1em;

  background-color: #435665;
}

.nav-header-icons {
  padding-right: 1em;
}

.nav-header-icon {
  height: 20px;
  margin: 0 8px;
}

Answer 2

您可以在标题和图标之间添加一个div（在我的示例中带有class spacer）：

<div className="nav-header-container">
  <span className="nav-header">TITLE</span>
  <div className="spacer"></div>
  <img className="nav-header-icon" src="http://localhost:8000/static/frontend/icons/bell.svg/" />
  <img className="nav-header-icon" src="http://localhost:8000/static/frontend/icons/chat.svg/" />
  <img className="nav-header-icon" src="http://localhost:8000/static/frontend/icons/settings.svg/" />
</div>

并在您的CSS规则中将其设置为flex:1：

.spacer{
   flex: 1
}