CSSの、display:flexが効かない

Ruby on rails で、簡単なレシピ投稿サイトを作成しています。

現在、ユーザーの詳細画面にて、

①ユーザーの投稿記事一覧
②ユーザーがつけたいいね記事一覧

の表示をさせる実装をしているのですが、②のいいね記事一覧の方の記事が、display:flexを用いても横並びにならず困っています。
(添付画像あり。いいね！一覧部分は、画像では見切れってしまっていますが、実際には縦並びで表示されています)

※①ユーザーの投稿記事一覧は、部分テンプレート(_post.html.erb)を呼び出して実装しています。
※横並びにならない ② の部分は、該当ファイル(show.html.erb)内にコメントを書いて、目印にしています。
※cssは、全て1つのファイルで書いているので長くなってしまっています。見辛かったらすみません。

どなたかご教授いただけると、幸いです。
宜しくお願い致します。

![![]

show.html.erb (ユーザー詳細画面)

<div class="main"> 
  <div class="inner">
    <div class="user__wrapper">
      <h2 class="page-heading">
        <%= "● #{@user.name}さんのページ ●"%>
      </h2>

      <div class="post-card">
        <h2>
          <%= "#{@user.name}さんの投稿一覧"%>
        </h2>
        <div class="user__card">
          <%= render partial: "posts/post", collection: @posts %>
        </div>
      </div>

<%# ↓↓横並びにならない、いいね一覧部分↓↓ %>
      <div class="like-card">
        <h2>
          <%= "#{@user.name}さんのいいね！一覧"%>
        </h2>
        <div class="user__card">
          <div class="card">          
            <% @user.liked_posts.each do |post| %>
                <p class="tag"><%= post.category.name %></p>
                <%= link_to image_tag(post.image, class: :card__img ), post_path(post.id) %>
                <div class="card__body">
                  <%= link_to post.title, post_path(post.id), class: :card__title%>

                <%# いいね部分始まり %>
                <div class="like_group">
                  <p class= "heart-icon">
                    <i class="fas fa-heart"></i>
                  </p>
                  <p class="post-count-number">
                    <%=post.liked_users.count %>
                  </p>
                </div>
                <%# いいね部分終わり %>
                <%= link_to "by #{post.user.name}", user_path(post.user_id), class: :card__user %>
            <% end %>
          </div>
        </div>
      </div>
<%# ↑↑横並びにならない、いいね一覧部分↑↑ %>

    </div>
  </div>
</div>

###_post.html.erb (①ユーザーの投稿記事一覧部分の、部分テンプレート)

<div class="card">
  <p class="tag"><%= post.category.name %></p>
  <%= link_to image_tag(post.image, class: :card__img ), post_path(post.id) %>
  <div class="card__body">
    <%= link_to post.title, post_path(post.id), class: :card__title%>

  <%# いいね部分始まり %>
  <div class="like_group">
    <p class= "heart-icon">
      <i class="fas fa-heart"></i>
    </p>
    <p class="post-count-number">
      <%=post.liked_users.count %>
    </p>
  </div>
  <%# いいね部分終わり %>

    <%= link_to "by #{post.user.name}", user_path(post.user_id), class: :card__user %>
  </div>
</div>

###style.css

/* リセットCSS */
* {
  box-sizing: border-box;
}

html,
body,
ul,
li,
h1,
h2,
p,
div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN W3", sans-serif;
  color: #3b4043;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: #3b4043;
}

/* ヘッダー */

.header {
  background-color: #FFDEAD;
  margin-bottom: 48px;
  padding: 20px 0;

}
.inner {
  width: 1024px;
  margin: 0 auto;
}
.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.logo {
  width: 160px;
  height: 35px;
}
.nav__btn{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8em;
  color: gray;
  text-decoration: none;
  user-select: none;
  border: 1px gray solid;
  border-radius: 3px;
  transition: 0.4s ease;
}
.nav__btn:hover{
  color: #fff;
  background: gray;
}

.nav__logout{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.9em;
  color: gray;
  text-decoration: none;
  user-select: none;
  margin-left: 50px;
}
.nav__logout:hover{
  opacity: 0.5;
}

.nav__name{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.9em;
  color: gray;
  text-decoration: none;
  user-select: none;

}

.nav__name:hover{
  opacity: 0.5;
}

.search_form{
  margin-top: 5px;
}



/* フォーム周り */
.form__wrapper{
  min-height: calc(100vh - 161px);
}

.form__text {
  width: 50%;
}

.field{
  margin: 10px 0;
}

.actions{
  margin-bottom: 40px;
}

.form__btn{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 0.8em;
  color: #fff;
  text-decoration: none;
  user-select: none;
  background: #87CEFA;
  border: 1px #87CEFA solid;
  border-radius: 3px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  transition: 0.2s ease;
}

.form__btn:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* メイン */

.greeting{
  margin-bottom: 20px;
}
.greeting__link{
  text-decoration: underline;
}
.page-heading {
  font-size: 30px;
  margin-bottom: 28px;
}
.card__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: calc(100vh - 161px);
}
.card {
  width: calc((100% - 50px) / 3);
  margin-bottom: 40px;
}
.card__img {
  margin-bottom: 16px;
}
.card__title {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: bold;
}
.card__summary {
  font-size: 16px;
}
.card__user {
  display: block;
  font-size: 12px;
  color: #999;
  text-align: right;
  text-decoration: underline;
}



.tag{
  position: relative;
  display: inline-block;
  padding: 0rem 5px 0rem 6px;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #fa4141;
  font-size: 12px;
}

tag:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

.show_tag{
  position: relative;
  display: inline-block;
  padding: 0rem 5px 0rem 6px;
  color: #fff;
  border-radius: 100vh 0 0 100vh;
  background: #fa4141;
  font-size: 12px;
  margin-left: 30%;
}

show_tag:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}





.show-lists{
  width: 200px;
  position: absolute;
  right: 400px;
  top: 80px;
  background-color: #ffffff;
}

.pull-down-list{
  padding: 10px 0px 5px 20px;
  border: 1px solid #eee;
  font-size: 13px;
}

.hidden{
  display: none;
}

/* いいね */
.like_group{
  display:flex;
}

.like_btn{
  width: 50px;
  height: 33px;
}


.fa-heart:before {
  font-size: 20px;
}

.fa-heart:before {
  color: #c70909;
}

.count-number{
  font-size: 18px;
}

.post-count-number{
  margin-left: 5px;
  margin-top: -1px;
}

/* 詳細ページ */
.prototype__wrapper{
  min-height: calc(100vh - 161px);
}
.prototype__hedding{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.prototype__user{
  display: block;
  font-size: 16px;
  color: #999;
  text-align: center;
  text-decoration: underline;
}
.prototype__image{
  width: 40%;
  margin: 0 auto;
  padding: 16px 0;
}
.prototype__detail{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 8px;
}
.detail__title{
  font-size: 20px;
  font-weight: bold;
}
.prototype__manage{
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.prototype__btn{
  display: block;
  padding: 0.4em 1.6em;
  font-size: 0.4em;
  color: #999;
  text-decoration: none;
  user-select: none;
  border: 1px #999 solid;
  border-radius: 3px;
  transition: 0.4s ease;
  margin: 0 4px;
}
.prototype__btn:hover{
  color: #fff;
  background: #999;
}

.prototype__comments{
  background-color: #FFF0F5;
  padding: 20px;
  margin: 28px 0 40px 0;
}

.comments_lists{
  padding-left: 20px;
}

.comments_list{
  list-style-type: square;
  padding-bottom: 5px;
}

.comment_user{
  font-size: 16px;
  color: #999;
  text-decoration: underline;
}

/* カテゴリ一覧ページ */
.category_card { 
  width: calc((100% - 50px) / 3);
  margin: 40px;
} 

.category_parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.category_child {
  width: calc((100% - -180px) / 3);
  margin-bottom: 30px;
}


.category_title{
  font-size: 28px;
  margin-bottom: 50px;
}

.no_category_card{
  width: calc((100% - 50px) / 3);
  margin: 40px;
  display: flex;
}

.no_category{
  text-align: center;
  font-size: 20px;
}

/* ユーザーページ */
.user__wrapper{
  min-height: calc(100vh - 161px);
}
.table{
  border-collapse: collapse;
  margin-bottom: 32px;
  width: 50%;
}
.table__col1{
  text-align: left;
  font-weight: bold;
  background: #fafafa;
  border-collapse: collapse;
  border: 1px solid #f5f5f5;
  width: 30%;
  padding: 8px;
}
.table__col2{
  text-align: left;
  border: 1px solid #f5f5f5;
  border-collapse: collapse;
  width: 70%;
  padding: 16px 8px;
}
.user__card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.page-heading{
  margin-left: -30px;
}

/* フッター */

.footer {
  background-color: #999;
  padding: 10px 0;
}
.copyright {
  text-align: center;
  color: #fff;
  font-size: 10px;
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .inner {
    width: 90%;
    margin: 0 auto;
  }
  .page-heading {
    font-size: 24px;
  }
  .card {
    width: 48%;
    margin-bottom: 40px;
  }
  .prototype_image{
    width: 60%;
  }
}

 /* スマホ表示 */
@media (max-width: 599px) {
  .logo {
    width: 120px;
  }
  .page-heading {
    font-size: 20px;
  }
  .card {
    width: 100%;
    margin-bottom: 60px;
  }
  .card__title {
    font-size: 18px;
  }
  .card__summary {
    font-size: 14px;
  }
  .prototype_image{
    width: 100%;
  }
  .table{
    width: 100%;
  }
}

行動規範の内容に同意します

回答1件

動かして確認したわけじゃないので確証はありませんが、問題は2つありそうです。

1つ目は、<div class="card__body">の閉じタグが無いことです。たぶん、投稿者名リンクの下に</div>が必要なのではないでしょうか?

2つ目の問題点は、「繰り返し範囲」です。つまり、@user.liked_posts.each doと、それに対応するendの位置が間違っている気がします。

CSSでは、.user__cardにdisplay: flexが設定されているので、flexアイテムは、<div class="user__card">の直下にある<div class="card">ですね。つまり、<div class="card">が、いいね投稿の数だけ繰り返されないといけません。

なので、<div class="card">...</div>を囲むように、@user.liked_posts.each doとendを書けばいいんじゃないかな。

投稿2021/03/10 21:03