Images don’t look tall or squashed on my phone since changing to width of 320px.
@PaulOB If I use something like flex: 1 1 400px; on the images, why don’t they shrink when the viewport width is less than 400px? I think each image may need to go inside a container to get that to work.
Yes they are fine on yours 
(I was looking at the OP’s original pen)
I think they should shrink ok and they seem to in Chrome.
img {
width: 320px;
align-self: center;
margin: 10px 30px;
border-radius: 30px;
border: 1px solid red;
flex:1 1 400px;
max-width:100%;
}
I did also add a max-width:100% as that seems to allow them to keep getting smaller.
OFF-Topic:
However with the flex-grow you will get the orphan image (should there be one) stretching to full width as it over-rides the basis. Grid may be another solution but then your probably back to using media queries (I haven’t tested as on holiday at the moment ;)).
Yes I have found that images work better in a container but there are still bugs with percentages as browsers seem to struggle when the width of the container is dependent on the width of its content which is itself a percentage of the container (I believe grid handles this better and it may indeed be browser specific).
well am not yet conversate with CSS GRID
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.
Ahh ok. Yes I just tested with the width still in place.
I believe what you are running into is that min-width for a flex item has a default of auto which stops the image shrinking. If you add min-width:0 the shrink problem will also be solved.
img {
flex:1 1 400px;
align-self: center;
margin: 10px 30px;
border-radius: 30px;
border: 1px solid red;
min-width:0;
}
That is a solution but will effectively stop the flex from growing the item so you never get an image bigger than 400px. That’s fine and may be desirable but is just different from flex-basis where the image will stretch to fill the available space until another 400px item can fit. Flex-basis is always a suggestion and not a fixed rule.
You don’t need the max-width:100% if the min-width is set to zero as mentioned in the post above (or indeed if you use the width:1px method you mentioned).
Interesting behaviors but the min-width:auto has caught me out before
In this instance, for a photo gallery, I think it is definitely desirable to severely limit the maximum width to avoid one or more photos on the bottom row of the Flexbox becoming much larger than the other photos.
I see flex-basis as being a fixed rule but challenging to fully understand.
It may help to consider example CSS such as:
flex: 1 1 400px;
max-width: 500px
That would usually constrain all flex items to be between 400 and 500 pixels wide but, very importantly, still allow flex items to shrink to less than 400 pixels wide on narrow smartphone screens.
With flex-shrink enabled, I think images should shrink when necessary without a ‘hack’ such as min-width: auto; . I have not checked or investigated further but I believe other types of element do shrink as expected. I cannot see any reason why image elements should not shrink like other Flexbox items.
(I am trying to avoid this thread going too far off topic)
Yes, it may be worth splitting these posts into a separate topic as they are a useful and interesting discussion about flex behaviour and the way images interact.
I think you misunderstood the min-width behaviour and min-width:auto is the default for flex items. It’s not a hack but designated behaviour. That’s why an auto sized image will not shrink or indeed any flex item who’s content will not wrap smaller.
I’ll put up a demo later just to make sure I’m talking sense :;
Here’s a demo that clearly shows the effect of min-width on normal content and on images and follows the pattern I would expect. (Note there are probably other scenarios I have not considered but wanted to show that min-width:0 is not a hack but the designated way to handle this.)
In the demo above you can see that flexbox items do not shrink past their minimum content so the behavior is consistent. Generally you would not want the elements to overflow but if you had a row and column structure you may want that to happen to make sure everything is even…
No flex-basis is more like a suggestion when flex-grow is in effect as seen in your example.where the elements are seldom 400px wide. The browser will stretch the elements to fill the available space but as soon as room for another element at 400px becomes available it will adjust all accordingly.
From all my tests above I see that things are working in the way I would expect (as per specs) although not always the way that I would want
I find threads like this the most useful and interesting because it deepens my understanding (and anyone watching) of the properties involved and also highlights any inconsistencies or strange behaviors that may be seen.
You can see that others have asked similar questions.
Many thanks @PaulOB.
I have always considered that you can make an image any width you like (ignoring possible quality degradation). I am therefore very suprised that when you clearly specify that an image element can shrink it may not shrink at all. We have to accept that this is how CSS works.
I had not come across this before because the software I usually use to create web pages always puts images inside containers, something like this (but usually with text):
I had come across the possible issue of long words not fitting within the width of flex items. Although I have never hit the issue in practice, it shows the need to check how Flexbox layouts will appear on small smartphones.
What I was meaning was that the rendering in any browser is determined precisely by the value of flex-basis (as far as I am aware). Flex-basis is therefore a lot more than just a suggestion that a browser can use how it likes. When grow, shrink and wrappng are enabled in row layouts, I like to think that flex-basis allows you to specify precisely a minimum desirable size while still allowing items to shrink further when there is inadequate width available: typically of course on smartphones. It then also acts as a starting point for growth.
I know others have had trouble with flex items on the bottom row appearing disproportionately large. I understand that it has been suggested that CSS should have some provision to avoid this happening. As we have found with the photo gallery, the only thing you can do at present is to quite severely limit growth by using max-width: which rather defeats much of what Flexbox has to offer. However things can work nicely if you have 12 items in a flexbox container. (Here I am assuming row layout, not column)
Yes, I have often said to myself “why did they do it this way?” but inevitably there was reasoning behind it even if I didn’t agree with it.
In the end you just have to be pragmatic and get on with it
Yes generally I would do the same. It just feels semantically more correct and offers a more robust structure.
Yes I agree with that and think we are probably saying much the same thing.
I’m sure there are other nuances still to be found as there are so many properties working together. That’s the beauty of flex but it can confuse at times.
Yes some sort of orphan ( or orphans) rule would have been nice
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.