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?

1 Like

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.

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?