display: flex;が適用されない

Question

前提・実現したいこと

display: flex;で要素を横並びにしたい

###状況
現在、プログラミングスクールの基礎カリキュラムを終えて、個人アプリをrailsで開発中です。
その際に、タイトルといいねボタンが画像のように横並びにしたいのですが、親要素にdisplay: flex;をしても要素が横並びになりませんでした。

そのため、タイトルといいねボタンが横並びになるようにしたいです。

ちなみに親要素とは、ソースコードのpostWapper__each-show-box__main-contents__topを指します。

##before

##after

show.html.haml

.postWrapper__each-show-box__main-contents
      .postWapper__each-show-box__main-contents__top
        .postWrapper__each-show-box__main-contents__top__title
          = @post.title
        .postWrapper__each-show-box__main-contents__top__favoritesBox
          - if current_user.already_favorited?(@post)
            = link_to post_favorites_path(@post), method: :delete do
              = icon('fas', 'thumbs-up')
          - else
            = link_to post_favorites_path(@post), method: :post do
              = icon('far', 'thumbs-up')
          .postWrapper__each-show-box__main-contents__top__favoritesBox__count
            = @post.favorites.count

 &__main-contents {
      padding: 10px;
      margin-top: 10px;
      &__top {
        display: flex;
        &__title {
          font-size: 30px;
          margin-bottom: 10px;
        }
        &__favoritesBox {
          display: flex;
          font-size: 28px;
          margin: 0 0 0 auto;
          a {
            padding-right: 10px;
            color: sandybrown;
          }
        }
      }

Answer 1

提示されたコードはうまく動きそうに見えます（コンパイル後はなんとなくの想像でしか有りませんが）、DevToolで色々見ていじるのが良いかと思います。

Comments

[susume]

検証ツールは質問する前にも何度も試し、検証ツールで動作の確認はしました。
検証ツールではうまくいくんですが、コードを書くとうまくいかない現象が起きています。

[susume]

&__topの部分だけcssがかからない状況なんですよね。本当に謎すぎて困り果てています。

そのほかの&__bodyや%__titleとかにはしっかりとcssは当たっており、検証ツールでも確認できました。

他の解答者様もぜひお力添えお願いいたします。

[mcho71]

あ、今更ですがtypoみつけました。postWapperになってますね。

[mcho71]

.postWapper__each-show-box__main-contents__top

[susume]

あ、ほんまや。笑

本当にありがとうございます。
単純なことにハマりすぎました。

結局あれから自分では原因分からなかったので、hamlの方に{style= "display: flex;"}という力技で解決したんですが、今回原因がわかってすっきりしました！

Answer 2

シンプルなHTMLとCSSだと下記のような記述で実現できます。
下記を参考に直してみてください。

<div class="flex">
  <div>ブーツ</div>
  <a href="#"><i class="fas fa-thumbs-up"></i></a>
</div>
<p>テスト環境</p>

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

Comments

[susume]

それは知っています。既に試しました。