水平居中 flexbox 项目，项目数量不均匀

Question

我有一个 flex 容器，带有徽标和一些链接。我希望徽标居中，链接在右侧。我能做的最好的事情就是将徽标居中放置在剩余的 space 中，它不在容器的中心。

以下是我目前的一些尝试：

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

如何使徽标居中于 flex 容器的实际中心？

Answer 1

不专门使用 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>

Answer 2

我认为你非常接近。过去，我在徽标元素前添加一个 flex 为 1 的 "blank-element" 就取得了很好的成功。徽标和链接元素的弹性也应为 1，这将确保它们在屏幕上都占据相同数量的 space（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/

水平居中 flexbox 项目，项目数量不均匀

Horizontal centering a flexbox item, with an uneven number of items

css

centering

flexbox

如何使徽标居中于 flex 容器的实际中心？