Thanks for your comments Paul.
I find the images shrink if you include width: 320px;
. . . . .or even if you use width: 1px;
I would not expect it to be necessary to include a value of width when there’s a value of flex-basis.
As we have 9 images, with screen widths giving two images on each Flexbox row the last image will be on a row of its own. Your max-width:100%
means this last image becomes a little more than twice the width of the other images. It’s probably preferable to make the max-width the same as the flex-basis.
For a photo gallery an option is to use object-fit: contain
to make all images the same aspect ratio at the expense of some cropping.