Hello, everyone, and welcome back.
In today's video, we will learn how to align flicks, items Flicks provides us with two properties
for this purpose line items, online content.
Let's talk about the first publicly aligned items.
This property is used to line items along the cross axis.
So if you have a Flex One Direction group.
So this would line items.
Would it be or if you have a Flex with Direction column.
It would.
The line items horizontally.
Let's give this a try.
So that's being a good editor.
Let's bring it up here.
So let's give.
Display flex to a container.
So display flex.
Let's save it.
And by default it is in directions.
So let's try giving it this property.
So a line.
Items on, let's say.
Stretch.
Let's say.
So a stretch is the default value.
So by default, it stretches the content vertically.
So if we increase the height to forgive, it should increase the height of our items as well.
So let's say height.
Four hundred pixels the table.
And as you can see, the height of items also increased it, except some more value.
So let's give them a try.
So it accepts this value flicks start.
So it aligns all the items at the start.
Similarly, it accepts and other randy flakes.
And so it aligns everything a bit and it accepts another value call center.
It moves everything to the center vertically.
Similarly, it's right before the election column.
So let's do a direction here.
Flake's direction, let's say.
Let's save it.
Let's increase the height limit to say.
Certain Dix's.
And as you can see, the design in the center horizontally.
Why is that?
Because a flex is in the direction column.
So the cross Access's horizontal.
Similarly, let's try moving into the star service Flex started exhibit.
And as you can see, it move to the start of her cross axis.
Similarly, that strike kicks in.
And as you can see it move to the end of a cross axis.
Similarly, the straight stretch, the tail, as you can see it, stretching all the elements across
the cross axis.
That's also a line items for Betty.
So moving on to the next one, which is a line Clinton.
This droplet is also used to line items along the cross axis.
Think of this as justified on denser cross axis.
So if you remember, we would only use us if I continue to remove the counting or items around the main
axis.
But here with a line Glenton, it moves the elements across the cross axis.
This property works only when there are more than one line of items.
So first, let's bring it back to normal.
So let's change it to room.
Let's remove this line item stability.
Let's remove the height.
Let's save it.
So let's try this aligned content.
So if I see a line content analysis center, nothing happens because it needs to have multiple grooves.
So let's do that.
So come on here.
Scoppetta only stood here once again.
And as you can see, the content is overflowing, so we need to wrap it to bring a direct line.
So going in here.
So let's rock and let's go to Valley Rock.
I'm not, as I can see, we've got doodlers here, but there isn't any extra space vertically because
this is a draw.
And we're talking about the cross axis.
We need more space.
Be good.
So let's do that.
So let's just increase the height.
Say 700 pixels, let's say.
And as you can see, the content is in the center of the screen.
What, or across the cross axis.
Similarly, let's try bringing it to the start.
Let's save it.
Now, as you can see, it is at the start of DROs axis.
Similarly, we can bring it to the end.
Now, as you can see, it is at the end of the cross axis.
So just like behind the space between in space alone and justify content, we can have that here as
well.
Let's see space between let's save it.
And now, as you can see, all the extra spaces between these two rows.
Similarly, we can have a space around the table.
And now, as you can see, all the extra space is divided around these rules.
So something is on the top, some in between and some at the bottom.
Similarly, we can use the volume, stretch the table.
Now, as you can see, both these rules kind of stretching across as much as possible.
Let's see how the line items in the center of the flick's.
So center work to go the center horizontally.
Let's remove these extra items.
Let's save it.
So we just have four.
Let's say we want to bring it to the center.
So first it came to the center vertically.
Now to bring it same to horizontally, we can use justify contant.
Again, Senator, let's it.
And as you can see, our content is isn't the same the that.
Similarly, let's try this proper different direction column.
So coming back cure that seems to column.
Let's save it on because we will on content stretch the line.
Clinton looks for the cross axis.
So all these columns out a stretch equally across the cross axis.
Similarly, let's try changing the wilderness and drift stretch.
Let's say start.
Let's say that so all the content is moved to the star of the cross axis.
Similar derivative fits in.
So all the content is at the end.
Let's try space between.
Let's save it.
And as you can see, all the available space is between these columns.
Similarly, let's try space around.
As you can see, all the spaces around these columns, let's try center.
As you can see, all the items are not in the center horizontally.
That's all for a langoulant and property.
Now that we know how to line items.
Let's see how to bring them to the center of the flakes for this purpose.
We can simply use a line item center to bring that in the center along.
Cross access and use justified content to bring them in center along main axis.
So let's give it a try.
Let's remove this.
Let's see.
First, let's reduce the number of items.
So that will give us a bit of clarity.
So let's remove this.
And this is real.
So now we're just left for items.
So going back here, let's give it a line item to bring it center across the cross axis.
So a line item on center.
And now, as you can see, it is in the center horizontal.
Now to bring it in the center.
What good.
You could simply use us to fly to London.
So just to fly.
Clinton Center.
That's either.
And now, as you can see, these four items are in the center of the death.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And Dick.