OK, next, property is justified content.
And basically what this means is, as you know, we have a container and within our container we have
items and within the items we have to access the main and across access and justify content defines
the alignment along the main axis.
It helps distribute extra free space left over when either all of the items on a line are inflexible
or they are flexible but have reached the maximum size.
It also saw some control over the alignment of the items when they overflow their line.
So let's take a look at how this works and we're going to go back into our code and step in here.
Comment of justify.
Content.
But before we get into justified content, let's first increase the size of our container to a height
of, let's say, 350 pixels.
And I also want to have just in front of the big source without stepping in height, so 350 pixels.
And also flexing the set of flex rap to rap.
OK,
so by default, just the fat content is at Flagstad.
So if I type no justify content and the first property is Flagstad and this is the default behavior
of just the fat content.
Now we can also type in start.
So just start.
And this will have exactly the same effects as she let me live like start and copied.
And it's so.
So you have both of the properties opposite to this will be CLECs end and with these items are packed
towards the end of the flex direction.
So if I were to justify content and flex and and hit save, I can say they are now to the end of the
flex.
Now the same thing goes for this with just typing in.
And
well, actually, they took it out and actually that's better because this is extremely confusing.
So keep in mind, Oleksander, because they took out just and they got a bit more specific this time.
Now, we also have just the fat content left and right.
And with these items are packed towards the left edge or the right edge of the container, unless that
doesn't make any sense with flex direction, then it behaves like start.
So you could to justify content and left and the same thing we tried.
But as I said, they're not that often used, not what is used to justify content to the center as it
says items are centered along the line.
But let me just.
Yep, you can see how this is working.
So now the plug section in the middle and everything is pushed in the center of of the container.
But more often are properties like center space between and space around and space evenly used.
So let's take a look at this space between where items are evenly distributed in the line.
The first item is on the start line and the last time item is on the last line so as to justify content
and as the space between let's hit save.
As you can see, we have now space between them.
Clustering them together.
And this pushed them apart.
Now, next up would be space around and with these items are evenly distributed in the line with equal
space around them, not that visually the spaces aren't equal since all of the items have equal spaces
on both sides.
The first item, we have one unit of space against the container edge, but two units of space between
the next item because that next item has its own space in that applies so as to justify content.
And as use space around and let's shrink it now a bit together.
And it's also.
Push aside so you can see on the edges the space isn't the same as between them, and the last property
would be space, evenly spaced, evenly items are distributed so that the space between any two items
is equal and also the space to the edges.
So let's do justify content and space evenly.
Let's see what happens.
I said save and it will shrink.
This together, you see, will have the same space all over.
To the edges and between the items.
OK, so that's basically it for justify content.