FAQ: Flexbox - Align-content

This community-built FAQ covers the “Align-content” exercise from the lesson “Flexbox”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Align-content

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

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?

3 Likes

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 stretch id 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.

2 Likes

In the example in this exercise, the dimensions of the container and child were declared using pixels.

  1. Could rem have been used instead?
  2. If so, what effect would this have had on the flex-wrap: wrap; and align-content: space-around; declarations?
  3. In this situation is it preferable to use px or rem to declare dimensions?

Why does setting a min-height rather than a fixed height cause this to take effect?

After we changed the “height” declaration to “min-height” the boxes stretched. Why?

I’m asking because although there is an id named “stretch” in the html file, there is no declaration for it in the CSS file.

So, are flex items, by default, stretchable? If yes, why did we use the id "stretch in the html file?

2 Likes

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?

1 Like

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.

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/lessons/learn-flexbox-l/exercises/align-content

1 Like

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

3 Likes

I’ve seen three different people all ask why the divs didn’t shrink or wrap for this exercise. Can anyone answer this?

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.

1 Like

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?

(Why does the right box go onto a new line)

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.

1 Like

Why is the the align-content property here affecting the vertical spacing of the items and no the horizontal spacing?

When my space-between and flex-start appear to be exactly the same.