水平为中心的Flexbox的项目，与奇数项

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>

How can I center the logo is the actual center of the flex container?

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>

编辑：留在边界，所以你可以看到它在做什么容易

检查这里的种种好Flexbox的提示：https://css-tricks.com/snippets/css/a-guide-to-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>