Горизонтальное центрирование элемента флексбокса с неравным количеством элементов

Question

У меня есть гибкий контейнер с логотипом и некоторыми ссылками.Я хочу, чтобы логотип был в центре, а ссылки - справа.Лучшее, что я могу сделать - центрировать логотип в оставшемся пространстве, которое не центрировано на контейнере.

Вот некоторые из моих попыток:

.header{background:#CCC;padding:1rem; margin-bottom:2rem;}
.logo{background:skyblue;text-align:center;height:30px;width:200px;}

/*-----------------------*/

#header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
#header1-logo {
  justify-self: center;
}
#header1-nav {
  justify-self: flex-end;
}

/*-----------------------*/

#header2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#header2-logo {
  margin: 0 auto;
}

<header id="header1" class="header">
  <div id="header1-logo" class="logo">LOGO</div>
  <nav id="header1-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>

<header id="header2" class="header">
  <div id="header2-logo" class="logo">LOGO</div>
  <nav id="header2-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>

Как сделать так, чтобы логотип располагался по центру фактического центра гибкого контейнера?

Answer 1

Думаю, вы довольно близки.В прошлом я добился хорошего успеха, просто добавив «пустой элемент» со сгибанием 1 перед элементом логотипа.Логотип и элемент ссылки также должны иметь изгиб 1, это гарантирует, что все они занимают одинаковое количество места на экране (1/3)

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  border: grey solid 2px;
}
#header-logo {
  flex: 1;
  margin: 0 auto;
  border: black solid 2px;
}
#blank-Element {
  flex:1;
}
#header-nav {
  flex:1;
  // other styles here

}

<header id="header" >
  <div id="blank-Element"></div> 
  <div id="header-logo">LOGO</div>
    <nav id="header-nav">
      <a href="#">foo</a>
      <a href="#">bar</a>
      <a href="#">baz</a>
    </nav>
</header>

edit: оставлено в границах, чтобы вы могли легко видеть, что он делает

Проверьте здесь все виды хороших советов flexbox: https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

Answer 2

Не используется исключительно flexbox, но можно было бы absolute разместить логотип?

.header{background:#CCC;padding:1rem; margin-bottom:2rem;}
.logo{background:skyblue;text-align:center;height:30px;width:200px;}

/*-----------------------*/

#header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
#header1-logo {
  position: absolute;
  left:0;
  right:0;
  margin:auto;
}
#header1-nav {
  margin-left:auto;
}

<header id="header1" class="header">
  <div id="header1-logo" class="logo">LOGO</div>
  <nav id="header1-nav">
    <a href="#">foo</a>
    <a href="#">bar</a>
    <a href="#">baz</a>
  </nav>
</header>