要素を任意の場所で折り返したいです。

Question

前提・実現したいこと

要素を横並びにしているのですが、任意の場所で折り返したいです。
画像を添付しておりまして、3つ目で折り返し、かつセンター揃えにしたく思います。
お手数ですがご回答お待ちしてます。

該当のソースコードhtml

<div class="catebox"> <div class="cateboxin"> <a href=“#”><img src=“1.jpg" /></a></div> <div class="cateboxin"> <a href="#"><img src=“2.jpg” /></a></div> <div class="cateboxin"> <a href="#"><img src=“3.jpg" /></a></div> <div class="cateboxin"> <a href="#"><img src=“4.jpg" /></a></div> <div class="cateboxin"> <a href="#"><img src=“5.jpg" /></a></div> <div class="cateboxin"> <a href="#"><img src=“6.jpg" /></a></div>

該当のソースコードCSS

.catebox{
width: 100%;
margin: 100px 0 0 0;
text-align: center;
}

.cateboxin{
width:30%;
display: inline-block;
padding: 0 5px 10px 5px ;
}

試したこと

flex-wrapで検索したのですがなぜか画面上から消えてしまいました。。
.catebox{
width: 700px;
display:flex;
flex-wrap:wrap;
text-align: center;
}

.cateboxin{
width:198px;
padding: 0 5px 10px 5px ;
}

Answer 1

flex-wrap: wrap; で折り返すようにすればいいと思います。

親要素(.catebox)の幅は 子要素の幅×3+余白 にします。

親要素はブロックレベル要素なので、中央寄せする場合は、margin: 0 auto;を使うといいでしょう。

.catebox{
  width: 640px;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
}

.cateboxin{
  width:198px;
  padding: 0 5px 10px 5px ;
}

.cateboxin img {
  width: 100%;
}

Comments

[kimu05]

ありがとうございます！解決いたしました。
助かりました。