html - 无法正确证明 flexbox 容器中的内容

Question

我在设置 flexbox 中元素的对齐时遇到了一些问题。

我在容器类中设置了这个属性，但不知何故它不会影响任何东西？我无法弄清楚，感谢您的帮助。

jsfiddle-> https://fiddle.jshell.net/n7ts68se/4/

(嵌入式编辑器用填充弄乱了一些东西，所以 jsfiddle)

我想让元素相互粘在一起，所以我设置了'center'值，但它们之间仍然留有空间，怎么了？

<nav class="main-header">                       
<a id="logo" class="main-button header-logo">                           
    <h4>test logo here..</h4>
</a>
<a id="t1" class="main-button">                         
    <h4> najnowsze standardy.</h4>
</a>
<a id="t2" class="main-button">
    <h4> profesjonalna wspólpraca.</h4>
</a>
<a id="t3"  class="main-button" href="kontakt.php">
    <h4>kontakt</h4>
</a>                                                
</nav>

CSS:

.main-header {
display: flex;
justify-content:     center;
margin: 0 0 3em 0;
}
.main-button {
background: rgba(70, 73, 79,0.6);   
margin: 0 auto;
padding: 0 1em;
color: darkblue;
font-size: 110%;
box-shadow: 1px 2px 1px 0px lightgray;
}

Answer 1

您需要从 .main-button 中删除 left/right 上的 margin: auto，这就是使元素表现得像您在 flex 容器上设置了 justify-content: space-around。

.main-header {
  display: flex;
  justify-content: center;
  margin: 0 0 3em 0;
}
.main-button {
  background: rgba(70, 73, 79, 0.6);
  padding: 0 1em;
  margin: 0;
  color: darkblue;
  font-size: 110%;
  box-shadow: 1px 2px 1px 0px lightgray;
}

<nav class="main-header">
  <a id="logo" class="main-button">
    <h4>test logo here..</h4>
  </a>
  <a id="t1" class="main-button">
    <h4> first. </h4>
  </a>
  <a id="t2" class="main-button">
    <h4> last. </h4>
  </a>
  <a id="t3" class="main-button" href="kontakt.php">
    <h4> after. </h4>
  </a>
</nav>