The flex-grow property stretches flex items vertically to fill its container?

I am on exercise six for Flexbox CSS.

As the exercise explains, the flex-grow property specifies if items should grow to fill a container. I don’t see flex-items stretching themselves vertically to fill the flex container. I noticed that flex-items fill the flex container horizontally by their margins, but it does not happen vertically (see image). So when I declare flex-items with the 'flex-grow property, they will never fill 100% of the parent container? Does the flex-grow property stretch flex items horizontally to fill the container 100% in width but does not happen the same vertically? I thought the flex-grow property would make the flex items fill 100% vertically and horizontally the flex container.

image
image
image
They fill horizontally by using margins but, not vertically as I said.

Hi Juan,

for the vertical alignment you have the properties align-items for all elements in a single row and align-content for all elements in multiple rows. If you want the elements to take all the available height of the parent element, you write

align-items: stretch;

on the element that has the property display: flex.
If you just want one element to take the available height, you set the specific element to

align-self: stretch;

You find a useful guide for flexbox here:
CSS Tricks

If I remember correctly, the Codecademy lesson covers that, too. Maybe it comes in a later lesson.

1 Like

Thank you Mirja! For your reply.

1 Like