フレックスコンテナの項目の中心にテキストが表示されます

Question

私はこのコードをhttps://codepen.io/luisguerra/pen/prROqYとしています。

私が望むのは、リスト内のアイテムの数がわかりませんし、同じ高さで縦に1センチの縦に配したいのですが、高さ：100％は、思考を動作させない？ .menuへ

.site-content { 
 
    height: 400px; 
 
} 
 

 
.menu { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.item { 
 
    flex: 1; 
 
}

<div class="site-content"> 
 
     <div class="menu"> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
    </div> 
 
</div> 
 

 

Answer 1

使用このコード100％作業：

.site-content { 
 
    height: 400px; 
 
} 
 

 
.menu { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.item { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
}

<div class="site-content"> 
 
     <div class="menu"> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
     <div class="item">Lorem ipsum</div> 
 
    </div> 
 
</div> 
 

 

Answer 2

justify-content: centerあなたflex-directionがcolumnあるので、お手伝いを致します。