画像を 並べる

質問

サイズの違う画像を並べているのですが、
サンブル通りにやると全て並んでしまいます。
3.4個おきに折り返したいのですが、cssを教えてください。
html
<div class="flex-container">
<div class="flex-item">
<div class="image-wrap">
<img src="image1.jpg">
</div>
</div>
<div class="flex-item">
<div class="image-wrap">
<img src="image2.jpg">
</div>
</div>
<div class="flex-item">
<div class="image-wrap">
<img src="image3.jpg">
</div>
</div>
<div class="flex-item">
<div class="image-wrap">
<img src="image4.jpg">
</div>
</div>
</div>

css
htmlflex-container {
display: flex;
}

.flex-item {
flex-basis: 100%;
}

.image-wrap{
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 10px 5px;
}

.image-wrap img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
}

回答No.1

AsarKingChang · ベストアンサー

であれば、
これ全体を、WIDTH指定したDIVの内包物にして
WIDTHを「3.4個おき」になるようなサイズにすればOKではないかと

お礼

ありがとうございます。