CSS flex boxで一部左寄せ、残りを右寄せの横並びメニューを作成した時の間隔について

Question

前提・実現したいこと

CSS flexで横並びで一部を左寄せ　その他を右寄せにし右寄せしたHome, Accessに指定のスペースを設けたいです。

初めての質問で上手く伝わっているか気になりますがお力になって頂けますと幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

<header> <p>Logo</p> <p>Home</p> <p>Access</p> </header>

CSS
header{
display: flex;
justify-content:flex-end;
}

header >:first-child{
margin-right: auto;
}

試したこと

Logoを左寄せ、HomeとAccessは右寄せにできたのですがHomeとAccessの間にスペースを指定する際marginだと<p>Logo</p>の部分も反映されてしまいました。
また<p>Logo</p>と<p>Home</p><p>Access</p>にそれぞれ<div>で囲みそれぞれにdisplay:flexを入力しましたがそれだとflex自体が上手く反映されませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

また<p>Logo</p>と<p>Home</p><p>Access</p>にそれぞれ<div>で囲みそれぞれにdisplay:flexを入力しましたがそれだとflex自体が上手く反映されませんでした。

上記の実装方法を、以下ではいかがでしょうか？

<header>
  <div>Logo</div>
  <div class="menu">
    <div>Home</div>
    <div>Access</div>
  </div>
</header>

header {
display: flex;
justify-content: space-between;
}
header .menu {
  display: flex;
}
header .menu>div {
  margin-left: 25px;
}

.menu>divのmarginは任意で値を変えてください。

pタグで囲むだけでも良いですが、個々にdivタグで囲み、classなどで要素の役割を明確にしてあげたほうがコードも見やすくなるかなと感じました。

Comments

[engineer7ah]

回答ありがとうございます。上記の方法で思い通りにレイアウトできました。またdivを用いたほうが良いというアドバイスまでいただきありがとうございました。

Answer 2

p要素の右にmarginを取ってから上書きすれば、期待する動きになると思います。

header{
  display: flex;
}

header > p{
  margin-right : 50px;
}

header >:first-child{
  margin-right: auto;
}

Comments

[engineer7ah]

回答ありがとうございます。上記の方法で思い通りにレイアウトできました。まだまだわからないことも多いですがこれからもよろしくお願いいたします。