headerをflexでロゴは左、電話番号とメールボタンは右に寄せたい

Question

headerで、イメージ図のようにロゴは左にして電話番号とメールは右に寄せたいです。

以下のコードを入れましたが、全体的に左に寄ります。
headerが真ん中に行ってくれません。どう書いたら良いでしょうか？？

<header>
    	<h1><img src="images/common/logo_hp.png" alt="ロゴ"></h1>
        <p><img src="images/common/tel.png" alt="電話">
        <img src="images/common/mail_btn.png" alt="資料請求"></p>
</header>

header{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	text-align:center;
	display:inline-flex;
	justify-content:space-between;
}

Answer 1

inline要素だからではないでしょうか？

display:inline-flex;

下記に変更してみてください

display:flex;

Answer 2

<header>
        <h1><img src="images/common/logo_hp.png" alt="ロゴ"></h1>
        <div>
          <p><img src="images/common/tel.png" alt="電話">
          <img src="images/common/mail_btn.png" alt="資料請求"></p>
        </div>
</header>

header{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    text-align:center;
    display:flex;
}
h1{
 flex:1;

これで意図通りの表示になると思います。

Comments

[yamada875]

flex:1って入れたらh1が大きくなるんですね！ありがとうございます！！

[MakotoOoka]

flex:1;は可変要素になります。
h1の画像を大きくしたくない場合は
<img src="images/common/logo_hp.png" alt="ロゴ">
にwidthを指定して下さい。

[yamada875]

特になにも指定してないのですが、h1の画像は元来のサイズのままでした。
他のブラウザで見たら大きくなってしまいますか？指定していた方がよいですか？？

[MakotoOoka]

img要素は基本的にはサイズ指定をされた方が良いと思います。
ブラウザによっては大きくなる場合もあると思いますよ。

[yamada875]

そうなのですね、今後ちゃんとサイズ指定します。ありがとうございます！