Hello, everyone, and welcome back.
In today's reveal, we learn about Flick's item properties, so these properties are used on Fleck's
items, not Flick's container.
Let's start with the first one.
So if you want to stretch all these items to date, they will lose face horizontally because this is
Direxion rule.
So what do you mean as we want to stretch them across the main axis?
So if you wanted to stretch them across vertical axis or cross axis, we could have simply used a line
items.
But you understood description of us horizontally or across the main axis.
So we could simply use another property like Flex Grow.
It accepts a number of value.
So by defining this value is zero.
So if I add this property here, flex and grow on, let's give it a dividing proces zero.
Nothing changes because this is the default value.
But here what we want to do is make all the elements grow by the same size.
So we could simply give it the value one that's even.
As you can see here, all these elements are expanded that this same with.
So they've got equal size in all living wills, space or let's say we want the second item to be twice
the size of other items.
So in that case, we could simply select the second item.
So item.
And the child, let's say, second.
Let's change the background color.
See bisque or Priscu?
I don't know.
So let's save that.
And now, as you can see, our second item has the background color.
So let's give it a flex grow value.
So let's see.
Do let's see here.
Now, as you can see, it has double the width of other items.
Similarly, see, we wanted an item to be smaller than other items.
We could simply use another block with decoyed flakes to shrink.
So instead of flick's grow, let's try using flex shrink.
Let's say do so.
We want this to be half the size of other elements.
Let's save it.
As you can see, nothing happens here.
Why is that?
Because this flex global body is also being applied to this item.
Flex grew, inflects, shrink, don't work together.
So first we need to do Fleck's Grozier.
So we are sending them back to their default value and not, as you can see, just the second day was
smaller than other days.
Let's remove all these shrink and group of ladies, let's say, well, let's do this also.
So as you can see, by default, the items take just enough rehder up to content.
But we can give these items a minimum bid for that CLECs house.
Another property called flex basis.
So let's try that.
So flex basis, let's say.
Hundred and twenty pixels that's saved.
And now, as you can see, all these items have a default minimum by those.
Hundred and twenty six houses and other blue property.
It helps you change the sequence of these items.
The so-called order.
And by default, all the Fleck's items have a default value off to zero.
So to bring something at the start, we could do oughton minus one.
So let's give it a try.
Let's say you want to move this second one on the first position.
So we could just give it a value order minus one.
Let's save it.
And now, as you can see, the second element is moved to the first position.
He said he wanted to move this at the end.
So by default, everything as a value zero and one is greater than zero.
So we could simply use one.
And as you can see here, the second live is moved at the end.
Now, say, if you want to do a line, particular items.
So in that case, you could use the property line itself.
So let's go in this for now.
Let's save it and everything is back to normal.
Now see if you wanted to second and third element to our different alane value.
So in that case, first, let's select the second and third element.
So for that, we could do something like this.
I do.
And a child even.
Let's give it a back Onkalo.
Let's see.
And now, as you can see, the second and fourth element has a different background color.
Let's say you want them to be aligned in the center.
So we could do something like this.
Align itself center.
Let's save it on.
Nothing changed because there is no extra space will tickly.
So let's add some height here, let's say.
Height on 400 pixels.
Let's say that on, as you can see, the second on foot.
Images line in the center.
Similarly, that you wanted audience to be line in the star.
So we could do something like this.
And a child on board.
Let's say a line serve on staff.
Let's save it.
As you can see, the order elements are aligned at the start.
On even a line in the sand to.
That's all for today, guys.
If there's something that you did not understand.
Feel free to drop a comment on.
We will discuss it.
See you in the next video.
Bye.
And Victor.