左对齐 1 child，其余右对齐 div

Question

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

似乎无法正常工作。 Justify-self: flex-end 没有结果。 Margin-right：自动生成这个：

代码：

    <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 间隔符）：

<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
}

左对齐 1 child，其余右对齐 div

Align 1 child left, the rest right in a div

css

alignment

flexbox