Why did the items that had the stretch property by default expand when I changed height to min-height, but not the other elements? Does the alignment prevent them from stretching in any way?
In case it’s useful to anyone else browsing the thread:
In the 5 id selectors in the exercise’s css, we’ve set these to the other 5 possible values for align-content (e.g. flex-start, flex-center), where each represent one of the 5 non-default options for align-content.
Only the value stretch expands the flex-items to fill the parent container. As we haven’t set anything for the stretchid in the css, and as stretch is align-content's default, this takes effect for the final group when we set a min-height rather than a fixed height.
I didn’t see real changes until I erased the width of the white container, this parent element was not responsive even thought display was set to flex. Is there any error in this excercice?
Maybe I am not understanding the ‘flex’ and ‘wrap’ elements but in this exercise the boxes hide from view when you shrink the browser. I was expecting them to shrink and/or go to the next line.
If you used rem to size the flex container instead of px, it would work fine! The only difference would be that if the user changed the default font size in his browser preferences, the flex container’s dimensions would be changed accordingly
This is the only difference - nothing else would be different. It is always preferable to use relative units of measurements as it enhances your user experience and might make your web page more responsive
The default value for the align-content property is stretch. This means that when possible, the rows will stretch to fit their parent container. However, when we declared a fixed height to the flex items, their height cannot be modified, so this is why they weren’t stretched. However, when we changed height to min-height, we simply said that the flex items had to be at least 75px tall. Of course, this means that they can be taller than 75px. This is why they were stretched
Okay, so I understand that without the “align-content” value, the default is that the child element stretch to fit its parent. However, what I don’t understand, is why would min-height change the left, right, center boxes and not MAX-HEIGHT.
When I change the value to max-height - the boxes become basically lines, boxes with no height.
…
Nvm, I get it. They’re empty divs. So of course there would be nothing if min-height/width isn’t defined.
In this exercise the .container class has a display property of (flex), yet the items within remain on two lines no matter how wide the gets, how did this happen?
The .container’s width is 600 pixels. Each box (.left .center and .right)'s width is 200 pixels. This should fill the div perfectly BUT the box’s also have margin of 2 pixels, meaning the total width of the boxes including the margins is 608 pixels (between the left&middle and middle&right the margin overlaps remember) which is over the containers 600 pixels which will just send the right box on the next line.
I had this problem but ended up noticing a slight color difference when I looked at my screen from a certain angle which made me check the css.
Hope this helps
PS - change the background colour on line 14 of css to something like green to make this more easier to understand.