Responsive image with flex wrap

Question

I want responsive image size with flex wrap. What i want is wrap after min-width of image has been reached, but what happens is it wraps image with max-width instead. First container without flex-direction and second with flex-direction: wrap .

 body, html { height: 100%; margin: 0; }.container, .container-wrap { display: flex; flex-direction: row; }.container-wrap { flex-wrap: wrap; }.item { min-width: 100px; min-height: 100px; max-width: 250px; }.item-image { width: 100%; height: auto; }

 <div class="container"> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> </div> <div class="container-wrap"> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300"/> </div> </div>

Answer 1

Use the below code for all scenarios:

 body, html { height: 100%; margin: 0; }.container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }.item-image { object-fit: cover; width: 100%; } @media (max-width: 420px) {.container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 320px) {.container { grid-template-columns: repeat(1, 1fr); } }

 <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> <div class="item"> <img class="item-image" src="https://picsum.photos/300" /> </div> </div> </body> </html>

Answer 2

Can you just use a media query?

@media(max-width:150px){ 
   .item, .container-wrap{
        display:block;
        flex:none;
   } 
}

Responsive image with flex wrap

Question

2 answers

solution1
1 ACCPTED 2020-12-09 18:35:05

solution2
0 2020-12-09 18:18:07

Responsive image with flex wrap

Question

2 answers

solution1 1 ACCPTED 2020-12-09 18:35:05

solution2 0 2020-12-09 18:18:07

solution1
1 ACCPTED 2020-12-09 18:35:05

solution2
0 2020-12-09 18:18:07