flexを使ってulでくくった画像を横に並ばせて、２行で折り返し表示がしたい

Question

実現したいこと

画像を赤い箱の1234のように2で折り返したい

flexを使ってulでくくった画像を並ばせたくて いろいろ試してみたのですが
123が並んで4ケ目だけ下にいくか
1234が縦並びになったり、123が重なってしまったりで希望の形になりません

該当のソースコード

<main>
    <div class="flexbox">
        <div class="div1">1</div>
        <div class="div1">2</div>
        <div class="div1">3</div>
        <div class="div1">4</div>
    </div>

    <div class="flexbox2">
        <ul class="ul2"><img src="img/photo1.jpg" alt="photo1"></ul>
        <ul class="ul2"><img src="img/photo2.jpg" alt="photo2"></ul>
        <ul class="ul2"><img src="img/photo3.jpg" alt="photo3"></ul>
        <ul class="ul2"><img src="img/photo4.jpg" alt="photo4"></ul>
    </div>
</main>

該当のソースコード

main{width: 500px;}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  }
    
.div1 {
  background: red;
  border: 1px solid #000;
  width: 45%;
  }

.flexbox2 {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  }

.ul2{
  background: blueviolet;
  border: 1px solid #000;
  width: 20%;
    }

試したこと

widthで幅を％指定
mainでくくって、幅を指定してpxで指定など横幅の問題化と試してみたけどダメでした。
また50％で指定しても（２ケ並べたいので１ケ50%指定かと思ったのですが）うまく２ケづつになりません

Answer 1

doyumaさんの回答をもとにwidth指定を追加。
その後divならできるけどulだとできない、と追加質問していましたが
ulタグの初期値が影響していたことが分かりました。
ulとdivタグの違いについて調べているときに発見しましたのでいったん解決とさせていただきます。

int32_tさん・doyumaさん
ありがとうございました。

Comments

[doyuma]

解決できて何よりです。

おっしゃる通り、ulタグにはデフォルトでpaddingやmarginが設定されております。
ulタグ以外にも設定されているタグはございます。
ブラウザによって見え方が違う場合もございます。

この性質は厄介なので、デフォルトで設定されている部分はリセットすることが多いと思われます。
参考サイトを掲載しておきますので参考にしてください。

https://snownotes.org/understanding-about-user-against-stylesheet-and-reset-css/

https://webdesign-trends.net/entry/8137

[yui33]

確認が遅くなりすみません。
サイトのご紹介、ご丁寧にありがとうございます。読ませていただきます。
すこしづつ理解進めていってる感じなのでまた何かありましたらお力添えいただければ幸いです。

Answer 2

まずはCSSで、imgに対してwidthやmax-widthを指定した方がいいかと思います。

mainに対してwidth: 500px;が指定されております。
しかし、imgには何も指定されていないため、
画像一枚あたり横幅はデフォルトの600pxになっているため、
mainから突き抜けてしまっております。

なので、imgに対してwidthやmax-widthを指定すべきです。

Comments

[yui33]

ありがとうございます。
width指定してみると
ul　の代わりに　div　で結んだバージョンでは希望の配置ができました。
ul　の代わりに　div　の性質の違いなのでしょうか？

Answer 3

.ul2 {
  ...
  box-sizing: border-box;
  width: 50%;
}

でいかがでしょうか。

Comments

[yui33]

ご回答ありがとうございます。
試してみたのですが、かさなったままでした。

box-sizing: border-box　については知らなかったのでこの機会に調べてみました。
使いこなせたら便利そうです。

[int32_t]

重なる、というのは <ul> どうしが重なっているのですか? 「ul 2つで折り返し」はできてませんか?

[yui33]

「ul 2つで折り返し」ができなくってお互い重なり合っている感じです。
ただ、widthでimgに対してサイズの指定をすると
ul　の代わりに　div　で結んだバージョンでは希望の配置ができました。
NETで模写課題でulで結んで…と指定があるのですがdivタグとulだと見た目同じでものちのち変わってくるのでしょうか？