「アイコンとテキスト（「ログイン」など）を縦並びにするためにフレックスボックスを使う」というのがいまいちしっくりきていません。

フレックスボックスを何度か復習し flex-direction を理解しているつもりでしたが、どうしても「フレックスボックス＝要素を横並びにしたいときに使用するもの」と思ってしまいます。

今回の場合、ヘッダーナビに対してdisplay: flex; を適用し横並びにしているため、「アイコンとテキスト（「ログイン」など）を縦並びにするためにはフレックスボックスを使う必要があった」という理解で合っていますでしょうか？