フレックスコンテナも水平に積み重ねるフレックスアイテムを作る方法は？

Question

水平メニューを作成しようとしています。フレックスボックスの私の理解では、私は要素が水平に積み重ね持つようにしたい場合は、私は次のページで、箱は縦

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。また、フレックスボックスなしで入手することもできます。ボックスにはdisplay: inline-blockとパーセント値を使用してください。

Answer 2

水平方向のフレックス方向がデフォルトの方向ですので、flex-direction: rowは余分です。今、あなたは垂直フレックスボックスを含む水平リストを持っています。

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

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