How to display products in a loop using flex

Question

I wrote my first online store using the Card class to display products. For example, for an inventory of 27, I show 5 images per row, and the last row shows 2 images. The Card class is good for retaining the same width & height for all images. Everything worked out well.

Now I'd like to write a responsive view with flex. I prefer flex because it handles various screen sizes great, but I know I'll have a problem with the last 2 images - they will get resized to fit the entire row.

I wish I could retain the same calculated image size throughout, using flex. Is that possible? I

Answer 1

I'm going to cancel this question by answering it myself! (Using a row of 5 across)

I found out (by accident) that if I can complete one full row of product images, the dimensions propagate to all subsequent rows. I don't know how that's possible, but it's working for me.

It only resizes if the very first row is less than 5.

In other words, I was testing with 3 images. Flex would resize them to fill the whole row. But later on, I tested with 18, and the remaining 3 retained the same dimensions as all the others.

Unexpected behavior, but it's working for me!

Huh!