Hello, in this video, we will discuss a very important property, justify content, justified content
is used to align to flex Container's items along the main axis.
This is somewhat similar to Texas, the line, but it is used with blocks instead of text and has several
values.
The first value of justified content is Fleck's start if we use this value, all Fleck's items are aligned
to the start of the main axis.
In other words, the items are left aligned.
The second value is called flex, and if we use this, the flex items in the container are aligned to
the end of the main axis, meaning they are right aligned in this case.
If we sit center as the value, all flex items will be aligned to center.
If we use the value space between.
All flex items will be positions with equal spaces between them in this case, as you can see, the
first item is positioned at the beginning of the main axis and the last one is at the end of it.
Finally, there is the space around value, which is similar to space between.
What's the difference between these two?
If we use space around, the flex, items will also be separated by equal spaces.
However, as you can see, the only big difference is that the first and last flex items don't border
the container, meaning there are spaces on the outsides.
These bases are equal to half of the space between the items, meaning half of this base.
OK, good.
Now let's see how it works in practice here we have our XHTML with our three blocks.
And also, we have cases where display flex is set for all these blocks.
And we see that our blogs are displayed like this by default, we have justified content, Flagstad,
and that's why if we add justified content Flagstad.
Nothing will change, but if we change, justify content, flicks start to flex and.
Then our blocks will be right aligned.
Now let's change flexin to center.
And let's see what our blogs look like.
As you see, all walks are centered and grouped as one.
Now, let's change center to space between.
Here we have our first block and here we have our last block and notice how this distance is the same
as this distance.
And the last value is space around.
Refresh the page.
And now we see that these distances are still of equal size, but they are a different size than they
were when we use space between, that is because spaces have appeared on the right side of the last
block and on the left side of the first block.
By the way, the spaces on the sides are half the distance as the spaces between the blocks.
So now you've seen how justified content works in practice and you know how to align elements along
the main axis, that's it.
See you in the next lesson.