How can I align wrapped flex items to the ones in the row above?

Question

I am trying to make the icons responsive. I gave them flex: 1 but it appears that the images below(the second row) extends upto the parents width as shown

I am expecting the 2nd row images to align same as the above images leaving a blank area as:

| img | img | img | img | img |

| img | img | x | x | x |

 .option-images { display: flex; flex-wrap: wrap; gap: 5px; max-width: 200px; /* for demo only */ }.option-images>div { flex: 1; }.change-img { cursor: pointer; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

 <div class="option-images"> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> </div>

Answer 1

This is a CSS grid job

 .option-images { display: grid; grid-template-columns: repeat(auto-fit,minmax(40px,1fr)); gap: 5px; /* for demo only */ width: 200px; border: 1px solid; overflow: hidden; resize: horizontal; }.change-img { cursor: pointer; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

 <div class="option-images"> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> <div> <img key={key} class="change-img" src="https://via.placeholder.com/100" onClick={imageChange} /> </div> </div>