1

我有一个 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 容器的实际中心？
4

2 回答 2

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>

于 2019-02-08T17:23:27.283 回答
0

我觉得你很接近。过去我取得了很大的成功，只是在 logo 元素之前添加了一个 flex 为 1 的“空白元素”。徽标和链接元素的 flex 也应为 1，这将确保它们在屏幕上占据相同数量的空间（1/3rd）

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

于 2019-02-08T17:27:58.363 回答