画像を横3列にして、画面の幅に応じて列数を変えたいです。
■やりたいこと
・画像を3列表示にして、画面の幅が狭くなると3列から2列になるような感じにしたいです。
・コードでは画像の順番は固定になっていますが、動的にする予定なので、画像の大きさは入れ変わるので、画像が入れ替わっても隙間なくいい感じにしたいです。
→”いい感じ”とは言語化が難しいので、添付画像を載せました。
3列にしても画像の大きさがバラバラなので隙間できてしまい、隙間が詰めれない所と幅に応じて列数を変えることがどうやっても上手くいかなく、、、
分かる方教えて頂きたいです。よろしくお願いします。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
.flex{
padding: 2.5% 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > *{
min-width: 8%;
flex-basis: 25%;
background: #fff;
font-size: 64px;
text-align: center;
}
.flex,
.flex > *{
border: 3px solid #aaa;
}
</style>
</head>
<body>
<div class="flex">
<img src="https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg" width="180" height="120">
<img src="https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg" width="180" height="100">
<img src="https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg" width="180" height="320">
<img src="https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg" width="180" height="100">
<img src="https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg" width="180" height="100">
<img src="#" width="180" height="320">
<img src="#" width="180" height="140">
<img src="#" width="180" height="170">
<img src="#" width="180" height="120">
</div>
</body>
</html>