は、フレックスボックスコンテナ内のコンテンツを正しく正当化できません。

Question

フレックスボックス内のアイテムの正当性を設定するにはいくつかの問題があります。

私はこのプロパティをコンテナクラスに設定していますが、何とか何か影響はありませんか？私はこれを理解することはできません。何か助けてくれてありがとう。

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

あなたはそれは要素はあなたがフレックスコンテナにjustify-content: space-aroundを設定した場合と同じ振る舞いを作っているもので、.main-buttonからleft/rightにmargin: autoを削除する必要があります。

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