フレックスボックス（html/css）のテキストを使ってnavの画像/ Unicode文字を整列させる

Question

私はここ数日でフレックスボックスを学んでいて問題があります。 my codepen example私は2つのフレックスボックスコンテナを使用するnavを持っています。 1つは "LOGO"と "UL"の行レイアウト用で、もう1つは "UL"自体の内側の "LI"項目用です。

!!問題！

「LI」アイテムのテキストだけを使用すると、ロゴはnavの最初のアイテム（この例では「HOME」）と垂直に整列します。しかし、最初の項目として☰や画像などのユニコード文字を使用すると、縦に並べることはありません。

この例では、フレックスボックスを使用してテキストがユニコード文字またはイメージと異なる理由は何ですか？私はそれらを正しく整列させる方法を見つけることができないようです。

免責事項：これは私のロゴではありません。私は簡単にアラインメントを見ることができたので、私はこのテストのためにGoogleでそれを見つけた。

Codepen link

HTML：

<nav> 
    <div id="logo"><img src="https://s-media-cache-ak0.pinimg.com/originals/82/ff/89/82ff8976d30df8ac4d34526fbda80dac.gif"> 
    </div> 
    <ul> 
    <!--UNICODE VERSION (UNCOMMENT TO SEE ISSUE) 
    <li>&#9776;</li> 
    --> 
    <!--IMG VERSION (UNCOMMENT TO SEE ISSUE) 
    <li><img src="https://css-tricks.com/wp-content/uploads/2012/10/threelines.png"></li> 
    --> 
    <li>Home</li> 
    <li>About</li> 
    <li>Portfolio</li> 
    <li>Contact</li> 
    </ul> 
</nav> 

はCSS：

nav { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 

nav #logo img { 
    max-width: 200px; 
} 

nav ul { 
    list-style-type: none; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

nav ul li { 
    padding: 10px; 
    text-transform: uppercase; 
} 

nav ul li img { 
    max-width: 50px; 
} 

Answer 1

何をしたいということですか？ Code Snippet

私はちょうどflex-direction: column;

にフレックス方向を変え、これはあなたが良いことを記述してください望むものでない場合は、おそらく最後の描画は、あなたが望む結果。