FAQ: Flexbox - align-items

This community-built FAQ covers the “align-items” 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-items

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 does align-items: baseline property ignores height\max-height set for #baseline .center selector and stretches center element up to height of left and right element? min-height works fine then.

I’m afraid I don’t understand why the flex items stretch when we change the height property of the flex items to min-height.

Can someone please shed some light on this?

1 Like

stretch is the default value for the property align-items so if no value is specified it will automatically stretch .
Also, remember:
min-height-keeps the size of the item from shrinking past a certain size. This will NOT keep an item from being made bigger or stretched.
height - sets a certain size to the item. With the height set to a specific value it will not shrink smaller or grow larger.
max-height- keeps an item from growing beyond a certain point. This will NOT keep an item from shrinking or getting smaller.

So… when we change height to min-height the item is allowed to stretch, and since stretch is the default value, the flex items stretch.
Hope this explanation helps.

4 Likes

An awesome way to learn about flex-box is flexbox froggy!

6 Likes

For exercise 5 (Align Items), how come only the boxes in the “stretch” div actually stretch? If this is the default value, shouldn’t this also apply to Flex Start, Flex End, Center, and Baseline? The height is not set for Left, Right, or Center boxes in those divs.

I think because the height is set to a specific value, it negates the default stretch property & value. Once we change this to min-height, the height still remains as 75px except in the stretch scenario where it stretches it

i keep have problem like this…


@wiki-bot does anyone can help?

I feel like align-items: baseline; should be explained in more detail and what baseline means. For example, if you enter text into all three baseline boxes, they all align at the top and not at the bottom. I notice flex-items with text and without text respond differently to properties.
Screen Shot 2020-09-21 at 1.52.08 PM

I found this online which helped me to better understand this value.
https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/#:~:text=The%20traditional%20baseline%20is%20the,of%20the%20element’s%20total%20height.

Also, justify-content: center is specified for the container but the default for display: flex; is flex-start. This was a bit confusing to me, since I like to see the default values for each property. If you remove justify-content: center, they all move to the left. align-items does not center them horizontally.
.container {
height: 150px;
background-color: WhiteSmoke;
display: flex;
justify-content: center;
}

What a great and funny exercise! Thanks a million! :slightly_smiling_face: