Flex-grow with justify-content

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/lessons/learn-flexbox/exercises/flex-direction

what happens to justify-content: space-around; after we declare flex-grow: 1;?

why there’s no space-around in first two rows after we use flex-grow: 1; ?

does flex-grow override justify-content?

Hey there alishersadullaev3059!

flex-grow defines the growth of a flex element inside a flex container.
I usually use only the shorthand version which is flex, when I set it to flex: 1 means that every element inside the flex container will change (grow, shrink) in the same way (or at the same rate).

space-between defines that the space available inside the flex container be spread equally between the flex elements.
The first element touches the flex-start border of the flex container, while the last element touches the flex-end border.

space-around is like space-between but the first and last element enjoy some space between their respective borders.

Check out this MDN article about justify-content and its values.

what happens to justify-content: space-around; after we declare flex-grow: 1; ?

The two properties are not in conflict with each other, so doing that you’re telling the browser:
hey you gotta space around those flex elements and let them grow at the same rate when the flex container changes.

why there’s no space-around in first two rows after we use flex-grow: 1; ?

I suspect that there’s no space left to distribute. If the elements take up all the space of the container, then space is null.

does flex-grow override justify-content?

Nope.

Hope this helps :slight_smile:

1 Like