display: flex;は、親要素に記述し、
子要素のclassセレクタ内に横並びにする内容を記述します。
.card__wrapper{display:flex; /*親要素に記述*/flex-wrap:wrap;justify-content:space-between;align-items:center;}.card{/*子要素を作成*/width:calc((100%-50px)/3);margin-bottom:40px;}↓each文の外に親要素のclassセレクタを記述します。
<divclass="card__wrapper"> #親要素<% @tweets.each do|tweet|%>
<%= render partial: "tweets/tweet", locals: { tweet: tweet } %><% end %></div>
↓render先のファイルです。
子要素でまとめることで、子要素ごとにeach文で繰り返しされます。
<divclass="card"> #子要素<%= link_to '詳細', tweet_path(tweet.id), class: :card__btn, method: :get %>
<%=link_to'編集',edit_tweet_path(tweet.id),class: :card__btn,method: :get%><%= link_to '削除', tweet_path(tweet.id), class: :card__btn, method: :delete %>
<%=link_to"投稿者: #{tweet.user.nickname}",user_path(tweet.user.id),class: :card__user,method: :get%><%= "タイトル: #{tweet.title}" %>
<%="内容: #{tweet.text}"%><br></div>