은 flexbox 컨테이너의 내용을 올바르게 정당화 할 수 없습니다.

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