CSS flex-question. Build A Nutrition Label Step 41

Curriculum Help
1

Hello!

A general question about flex. What’s the difference between “justify-content:” and “justify-self:”?

I’m thinking about “build a nutrition label” step 41. We first set p items to display as flex, and to justify its content with space-between. We then create a .right class, and set the justify-content property to “flex-end”. Am I right in assuming this is a specificity thing, where we are overriding p elements that have a .right class justify value? And that this wouldn’t work on, say, a h2 element if h2 isn’t set to display as flex? And that justify-self is for things wrapped in the flex element ( so if there is a… div or span element wrapped in the p elements, for instance…)?

2

Hey @Kraniumet

First major difference is that justify-content belongs to flex containers where as justify-self belongs to grids.

justify-content applies to flex containers (the parents). It controls how the flex items are distributed along the axis and justify-self applies to individual grid items (the child). It controls how single item aligns within its grid cell.

Yes, you are right about the specificity part. .right has higher specificity and it overrides justify-content for paragraphs with that class.

Yea, this wouldn’t work for a h2 element unless and until it is a flex container i.e. display set to flex.

Once again, justify-self is not part of flex. It is a Grid layout property. You’ll be learning that in future lessons and then it will be more clear once you implement it.

3

Thank you for the answer! Because it is taught in the flex lesson, I assumed it was a flex property. But it still works with flex items? Or is setting them to ”justify-self” making them act as Grid items within the flex container?

4

are you maybe thinking of align-self? that one is a flex property

justify-self is not part of either, you can use it in any case, in flex it is even ignored, so I’ll go look at lesson and see if it needs updated

5

That might be it. The difference between the use of ”align” and ”justify” is admittedly still a bit confusing to me.

But then, to the original question, align-self is for specific items wrapped in the flex container, overriding ”justify-content” variables?

6

yes, the properties applied to the single elements override the general ones