width: 100%; along with height:auto; is what allows the image to scale down (and maintain it's aspect ratio) when the available space is less than the image's native width, which = (img width attribute in the html)
max-width: <native image width>; is what keeps the image from distorting it's aspect ratio when the available space be greater than the image's native width.
Remove those rules (one at a time) and you will see what happens as you drag your browser window back and forth.
Some images distort worse than others, but that combination of rules is a standard practice for responsive images in the html.
The margin: auto; rule just centers the image in the available space, it's optional.
Note: the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.
As a fallback you can use space-around;
align-content: space-around; /* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-evenly; /* Distribute items evenly
Items have equal space around them */
As you said in previous post basis of 45%is saying that this element will take 45% of space of its container but what does 1 and 1 mean. It means that it can grow or shrink but this is not absolute value I imagine. Is it relative to other items in container and if so how much. If shrink value was set to 0 does that mean element can not shrink so what happens when browser window gets smaller?
A lot of people think that items with flex-grow will be based on the size of the other flex-items and may expect an item with:flex-grow:2 to be twice as big as other flex-items. Flex grow actually redistributes the remaining space and does not really relate to the size of the items.
If only one flex-item had flex-grow:1 and the others in the same context did not then the item with flex-grow:1 will be as wide as its content plus all the rest of the space on that line (if any). It may end up being 20 times bigger than other content and indeed if you added flex:grow:20 it would make no difference because the remaining space is already applied with 1.
If several elements have flex-grow:1 then the remaining space in the line is equally distributed between those items. They all may end up being different sizes because their content may be different.
Flex-grow effectively targets the remaining space on a line and distributes to items that have flex-grow applied. If they are all flex-grow:1 except that one item is flex-grow:2 then the item with 2 will have twice as much free space added as the others.
I'm still trying to get my head wrapped around flexbox, but I am much further along than I was a couple of weeks ago.
Yes, that 'remaining space' is the key condition.
I was referring to it as 'space available' in my closing comment above.
As I understand it, that's how it works. The amount of other items, their size and flex factors, and the space available in the container all play a role in how adjustments get made.
My definition of flex-grow would have been clearer with that key condition included. I did make sure that it was pointed out though
flex-grow:1; means grow at 1x the rate of other items that grow, when remaining space is available
Looking back at my example in post #23 I now see that there really is no flex factors happening. Being that all my flex-basis widths total out to 100%. It is basically a fluid layout that's just using flex to align everything.
My take on this flex factor vs. remaining space condition, is that since flex-shrink is the opposite of flex-grow, then the conditions must be true for it to happen also.
And that neither flex-grow nor flex-shrink can happen, without that key component of 'remaining space available'.
As long as the total sum of (child) flex-basis values do not fill the parents width, then there will be 'remaining space available' that can be distributed into the flex factors, whether they be grow or shrink