html,cssの、display: flex について教えてください。

ロゴが左上にきて、右寄せのナビゲーションを作りたいです。
下記、間違っているところをご指摘いただけないでしょうか。

cssで、navを横並びにして、右寄せにするところまではできたのですが、その後に
.wrap{
display: flex;
}
と打つと、 justify-content: flex-end;　の右寄せが崩れて左に寄ってしまいます。



html
---
<header>
<div class="wrap">
<img src="ロゴ.jpg">
<nav>
<ul>
<li>いっこめ</li>
<li>にこめ</li>
</ul>
</nav>
</div>
</header>


css
---
nav ul{
display: flex;
justify-content: flex-end;
}

nav ul li{
list-style: none;
padding-left: 10px;
}

.wrap{
display: flex;
}


本やネットなど数時間調べてやってみましたができないので質問しました。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： wanderer1 回答日時： 2020/07/15 22:07

nav ul{

display: flex;
justify-content: flex-end;
}

nav ul li{
list-style: none;
padding-left: 10px;
}

.wrap{
display: flex;
justify-content: space-between;
}

これでたぶん狙った効果が出ます。（ぼくの環境ではそうなりました）

何がポイントかというと、.wrap でflexを指定すると、そこにもjustify-contentが発生しているんですね。
ですからスペースを指定してやらないとダメということでして。

space-between;でロゴとulのスペースを上手に作ってくれるわけです。

この回答へのお礼

早速の返信ありがとうございます。
.wrap{
display: flex;
justify-content: space-between;
}
これでできました！
数時間悩んだのがたった一行で解決しました、、、
css本当に難しいです。

解説まで丁寧に記載してくださり、感謝いたします。
本当にありがとうございました！

お礼日時：2020/07/15 22:42