플렉스 컨테이너가 수평으로 쌓이는 플렉스 아이템을 만드는 방법은 무엇입니까?

Question

가로 메뉴를 만들려고합니다. 인 flexbox의 나의 이해는 내가 요소가 수평 스택 갖고 싶어, 내가 다음 페이지에서, 박스는 수직

div#navcontainer { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
} 
 

 
div.navitem { 
 
    color: #292929; 
 
    height: 45px; 
 
    width: 150px; 
 
    padding: 5px; 
 
    border-color: 292929; 
 
    border-width: 2px; 
 
    border-style: solid; 
 

 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div id="header"> 
 
    <div id="navcontainer"> 
 
    <div class="navitem"><a href="./index.html">home</a></div> 
 
    <div class="navitem"><a href="./about.html">about</a></div> 
 
    <div class="navitem"><a href="./services.html">services</a></div> 
 
    <div class="navitem"><a href="./contact.html">contact</a></div> 
 
    </div> 
 
</div>

스택,

display: flex 
flex-direction: row; 

그러나 CSS 규칙을 적용해야한다는 것입니다

다른 요소의 플렉스 컨테이너가 수직으로 쌓이는 CSS 플렉스 항목을 만드는 방법은 무엇입니까?

Answer 1

세트 display: flex-#navcontainer. 또한 flexbox없이 얻을 수 있습니다. 상자에 대해 display: inline-block 및 백분율 값을 사용하십시오.

Answer 2

수평 방향이 기본 방향이므로 flex-direction: row은 불필요합니다. 지금 당신은 수직 플렉스 박스를 포함 할 수평리스트를 가지고 있습니다. 당신의 HTML에 당신이`ID = "navcontainer"를 '가지고 있지만 CSS에서이`.navcontainer` ... 당신은 또한 플렉스 방향'으로 설정 navcontainer``이 있다고

는

#navcontainer { 
    display: flex; 
    flex-wrap: nowrap; 
} 

.navitem { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}