Align 1 child left, the rest right in a div

Question

Trying to align the 3 icons to the right while keeping the title positioned to the left:

Can't seem to get it to work. Justify-self: flex-end produced no result. Margin-right: auto produced this:

CODE:

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

margin-right:auto to nav-header – Temani Afif May 30 '20 at 09:49 — Temani Afif, May 30 '20 at 09:49

score 0 · Accepted Answer · answered May 30 '20 at 06:51

Wrap the icons in a div then go 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;
}

score 0 · Answer 2 · answered May 30 '20 at 06:56

You can add a div between title and icons (with class spacer on my example):

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

And set it flex:1 on your css rule:

.spacer{
   flex: 1
}

Align 1 child left, the rest right in a div

2 Answers2