画像と文字を横並びにして、cssで六つの要素を一気に装飾したい。

Question

現在もPas-Polというサイトの模写をやっています。display: flex; とflex-direction: column; を使って　https://pas-pol.jp/のNEWS欄の下にある画像と文字のような並び。画像と文字を一気に、横並びすることとを試みましたが
コードがおかしかったせいか上手くいきませんでした。

私の理想は

img text

img text

img text

のような形で画像と文字を横に並ばせることです。ですがdisplay: flexを使うと画像のような並びになってしまいます。
それを改善しようとしてflex-direction: column; を使ったら横並びしなくなって頭を抱えています。
6つ一括にimg text　のような形
img text
img text
img text
img text
img text
img text
にするにはどうすれば良いですか。回答よろしくお願いいたします。

   <div class="wrap">
    <div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2.jpg"> </div>
      <div class="text">地球一周 365日 
        世<br>界遺産絶景の旅</div>

 
    <div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg"> </div>
    <div class="text"> 365日 京都 絶景の<br>旅</div>
   

    <div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/05/springphoto.jpg"></div>
    <div class="text">365日 北海道 絶景<br>
      日めくりカレンダー</div>
    
   
    <div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/2020-12-10-16.59.15.jpg"></div>
      <div class="text">365日 北海道
        絶景<br>の旅</div>

    </div>
<div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg">  </div>
    <div class="text"> The World<br>
       Festival Duide
       - <br>海外の音楽フェス完<br>
      全ガイド -</div>
  

    <div class="img">
      <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg"> </div>
    <div class="text">この世界で死ぬまで<br>
      にしたいこと2000</div>

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

.img img {
  width: 320px;
  

Comments

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[bibibin07]

ソースコード書きました。文章ももわかりやすくしました。
わかりにくい質問の仕方をしてしまい申し訳ありません。

Answer 1

この作業を6回繰り返すか迷っていたのですが、空白の間隔や、画像の位置が一定であったため、一気に指定できる方法があるのではないか

具体的なコードをご提示いただいていないので具体的な回答は難しいです。
一般論として回答します。

クラスを使えばいいのではないかと思います。
同じ文書中に同じクラスを何度も使うことができるので、クラスセレクタを使ったスタイル指定をすることによって、複数の要素に同じスタイルを適用することができます。

参考：
スタイルシート［CSS］/CSSの基本/クラス名を使った指定 - TAG index
クラスセレクター - CSS: カスケーディングスタイルシート | MDN

---

質問の編集に合わせて追記

まず、HTMLが間違っていると思いますのでそれを修正してください。

        絶景<br>の旅</div>

    </div><!-- いらない -->
<div class="img">

次に、ご提示のHTMLだとフレックスレイアウトには向いていないので、HTML構造を変えるか、グリッドレイアウトを検討してください。

.wrap {
display: grid;
grid: auto-flow / auto auto;
justify-content: center;
}
.img img {
  width: 320px;

Comments

[bibibin07]

返信していただきありがとうございます。ご指摘の通り、HTML構造が良くなかったみたいです。HTML構造を変えて、フレックスレイアウトを導入したら上手くいきました。

ご指摘がなかったら、この問題を解決することができていなかったと思います。
前回もお世話になっていたことに気付きました。いつもありがとうございます。

Answer 2

こんな感じでよいのでは？

<style>
.wrap{
display:flex;
  flex-wrap:wrap;
}
.img{
  min-width:100px;
}
.txt{
  min-width:100px;
width:calc(100% - 100px);
}
</style>
<div class="wrap">
<div class="img"><img src="" alt="img"></div>
<div class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="img"><img src="" alt="img"></div>
<div class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="img"><img src="" alt="img"></div>
<div class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>

Comments

[bibibin07]

回答ありがとうございます。
コピペしてやってみましたが上手くいきませんでした。