How to display products in a loop using flex

Coreysan 1,346 Reputation points

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

Microsoft Technologies based on the .NET software framework.
2,052 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Coreysan 1,346 Reputation points

    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!


    0 comments No comments