display: flex;が効かない理由を知りたいです

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

HTML

<header> <div class="header-logo">30日トライアル</div> <div class="header-contents"> <div>デイトラとは</div> <div>コース一覧</div> <div>お問い合わせ</div> </div> </header>

CSS
header {
display: flex;
}

.header-logo {
margin-right: auto;
}

試したこと

ここに問題に対して試したことを記載してください。

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

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

Comments

[kokemomo.sour]

現在どうなっているか、
どうなっているのが理想か、
それぞれキャプチャをいただくか説明いただくことできますでしょうか。

[panddd00]

現在、
３０日トライアル　デイトラとは
　　　　　　　　　コース一覧
　　　　　　　　　お問い合わせ
となっている状態で、作りたいのは
30日トライアル　　　　　　　デイトラとは　コース一覧　お問い合わせ　
といったようなものです。宜しくお願い致します。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[panddd00]

すみません。初めて使ったもので…

解決済みにさせていただきます。

Answer 1

display: flex;は設定した要素の子要素が横並びになるというものです。

headerの子要素である.header-logoと.header-contentsは横並びになってます。

.header-contentsの子要素も横並びにしたいなら、それにもdisplay: flex;を設定してください。

.header-contents {
  display: flex;
}

Comments

[panddd00]

なるほど！ありがとうございます！！助かりました。