Question

我在设计Flexbox中的项目时存在一些问题。

我在容器类中设置此属性，但它在某种程度上不影响任何东西？我想不出来，谢谢你的帮助。

jsfiddle-＆GT; https://fiddle.jshell.net/n7ts68se/4/

（嵌入式编辑器弄乱了填充内容，所以jsfiddle）

我希望这些项目能够相互粘贴，所以我设置了“中心”值，但它们之间仍然留有空间，这是错误的吗？

<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

您需要从margin: auto移除left/right上的.main-button，这就是使得元素的行为与在Flex容器上设置justify-content: space-around时的行为相同。 / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: