ひとまとまりの要素を横並びにしたい

Question

Index.html.erb

      <div class="pic__wrapper">
        <div class="pic">
          <div class="card__body">
              < img="/post.image" class="posted_pic">
              <div class="card__text">
                <div class="card__title">post.post_title</div> 
                <div class="card__user">post.user.nickname</div>
              </div>
          </div>
        </div>
      </div>

 <div>投稿する</div>

.pic__wrapper {
  display: flex;
  flex-wrap: wrap;
}

.card__body {
  display: flex;
}

.pic {
  width: calc((100vw - 40px) / 3);
  margin: 40px;
}

.posted_pic {
  margin-right: 20px ;
  margin-left: 20px ;
  width: 35vh;
  height: 35vh;
  margin-bottom: 8px;
}

.card__title {
  justify-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.card__summary {
  font-size: 15px;
  margin-bottom: 20px;
}

この状態ですと、下記の画像のように全ての項目が横並びになってしまいうまく表示させることができません。※ここの「ことり」はユーザー名、「テスト」はタイトルです。

ブラウザで見た時

画像、タイトル、投稿者の一まとまりで縦並び、その一まとまりごとに横並びにしたいのですが全てが横並びか全てが縦並びとなり理想の実装ができません。

card__bodyクラスにflexboxやinline flexなど入れたり他のクラスにもdisplay:flexなどをあててみたのですが、いずれもうまくいかず。。。

ご教授頂けますと幸いです。
どうぞ宜しくお願い致します。

Comments

[yambejp]

HTMLの並びを質問するならrubyの部分を排除して生HTMLで聞いたほうが良いと思います

[ammy]

ご指摘ありがとうございます。修正を致しました。

[miyabi_pudding]

質問タグの問題ではなく、構文自体、ですよ。
ファイルのソースコードではなく、ブラウザで表示された最終のHTMLソースコードを質問文に記載した方が、という意味ですよ、おそらく。

[ammy]

理解不足でお手数おかけして申し訳ありません。
構文の編集を致しました。宜しくお願い致します。

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

[ammy]

kei344さん
わざわざありがとうございます。今回は自己解決したので、大丈夫ですが、今後また質問させていただくことがありましたら、必要に応じて画像をアップさせて頂きます。ありがとうございました。

Answer 1

自己解決しちゃったみたいですが、せっかくサンプル作成したのでアップしておきます。

.pic__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* space-between */
}

.card__body {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pic {
  width: calc((100vw - 120px) / 3);
/*  margin: 20px; */
}

.posted_pic {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}
.card__text {
    text-align: center;
}

.card__title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.card__summary {
  font-size: 15px;
  margin-bottom: 20px;
}

Codepenサンプル

picクラスにflexをつけただけでは解決しないように気がする。

Comments

[ammy]

hatena19さん
わざわざありがとうございます！とても参考にになります！
こちらも参考にさせて頂きます。ありがとうございました！

Answer 2

picクラスにflexをつけたら横ならびになりました。
全て試したと思っていたのですが、できていなかったようです。