display: flex;が効いていないんでしょうか？

Question

親要素にdisplay: flex;を適用しているのに横並びになりません。

このようにcssを適用させています。（合っているかはわかりません）
この状態でrails sをしてサーバーを立ち上げてみると
このように表示されてしまい、横並びにすることができません。

Comments

[BluOxy]

「hayate」や「test」を横並びにしたいということでしょうか。
それ等の文字列を持つpタグはflexを適用したheaderタグの外にありますが、正しくはheaderタグの中ではないでしょうか。

[meroa]

説明不足ですいません。
横並びにしたい部分はheaderの部分でイメージ的には
Blog 投稿する
このような形にしたいです。

Answer 1

こんばんは。

display: flex;が効いていないんでしょうか？

効いていないと思います。
フレックスで横並びにしたい場合は、横並びにする要素の親要素にdisplay: flexを付してください。
祖先要素につけても、あまり意味はありません。

Comments

[meroa]

回答ありがとうございます！！
この場合の親要素はどこでしょうか？
無知ですいません。

[Lhankor_Mhy]

.header__bar だと思います。

[meroa]

できました！
ご丁寧にありがとうございます。