Question

我有一个Flex容器，带有徽标和一些链接。我希望徽标居中，并且链接在右侧。我似乎能做的最好的事情就是将徽标放在剩余空间的中心，而不是放在容器的中心。

到目前为止，这是我的一些尝试：

.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

我认为您非常接近。过去，我在徽标元素之前添加了一个弹性值为1的“空白元素”，取得了不错的成功。徽标和links元素的挠度也应为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/

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

2 个答案: