Hello, everyone, and welcome back.
In today's video, we can learn about Fleck's container properties.
Let's start with the first property display, flames.
This property is used to tell the browser that the dirt on its children will follow Fleck's layout rules.
So let's try giving this different display.
So come in here.
So we've already got this container here.
So let's change the display on it.
Say honestly, Fleck's let's say there are now, as you can see, all the items are moved next to each
other and are taking only enough space to drop the content by.
They followed the direction of this rule.
But we can change that using the Flex Direction property.
So let's try that.
So flex direction, let's say you are now going to save it.
Nothing changes because as I just mentioned, rule is the default value.
So that's how these are positioned.
Let's try another very road reverse.
Let's say the.
And as you can see, they are just a line on the right.
So if you see here, the first element is the one.
The second is the do the live trade, then did four.
So if I just bring this down here.
I just remove and save it.
So, as you can see, the live is starting from one to two foot, but then you make it through a divorce.
They don't just move under it.
They start from the right.
Right.
Similarly, it's driving up the value which is falling, let's say, but not as you can see, all the
elements are stacked.
So moved by the first on the door.
On the last on the bottom.
Similarly, it accepts an avalanche of voluntary votes.
Let's say that.
And as you can see, the elements are starting from the bottom.
So divine is at the bottom.
So the one then on top of that have to process.
Therefore, let's just bring it back to rule for now.
Let's save it.
So, as you can see, these elements are next to each other.
So there's a lot of empty space over here.
So let's try to manage this available space.
See if you want all the elements to have equal space between them.
For that, we can use another property called justified content.
So let's bring up a good idea to.
Justify content, safe space between, let's say it, and now, as you can see, all the available space
is divided equally between all these elements.
So if, you know, does this justify collective property, it works on the main axis and it except some
more.
So let's try that.
So in sort of space between let's say we want all these items to have the same space around them, also
some sort of space between we could do space around the table.
And now, as you can see, all the way through, space is divided around.
So it's got space here.
Here.
Even on the left.
And I can say a little thing.
You can move everything at the star.
So let's say flick star.
So all these items, they move to the star.
Similarly, we can move them to the end.
So we could do physics and so on, like direction reverse flicks and moves everything to the end of
the main axis.
So as you can see, we've got the one, two, three, four.
Similarly, we can look at the center as well.
So for the object and just use this center.
And now all the elements are in the center horizontally or on the main axis.
Similarly, let's try this property for GOLOMB as well.
So let's change this to column.
Let's save it because there is no extra space.
So let's increase the height.
So a hundred old high.
Let's see here.
And right now, justified content is S.O.S, so that's why all these items are in the center across
the main axis, which is vertical, not because this is a column.
Similarly, let's try a space between, let's say, lip.
And now, as you can see, there is a good squeeze between all the items.
Let's try changing it to space around.
Let's say would not, as you can see, this space on the top and bottom as well.
Similarly, that strategy need to flex start because this is a column so that it can move to the top.
We can último everything at the bottom by using fixed in.
So everything came down.
All right.
So let's bring everything back to normal right now.
So flex to action, Drew.
Let's remove the height.
All right.
So what about this Norman Slick's container?
Let's say we have more items, so let's just come here.
So coming to next Nexus, she will file its copy, paste it here.
No, we have double lights.
Let's face it again.
Now, as you can see, we've got item is a big shrink because the DERF the numbers on the next day.
Now, let's face it again.
Now, as you can see, the content is overflowing because Flick's cannot shrink it anymore.
So that's why the content is.
By default, Flick's doesn't Rupp's content in the next line.
But we can do that using the property.
Right.
So let's give it a try.
So coming.
But Hugh, let's say Flick's wrap.
It accepts a value wrap.
Let's save it.
Now, as you can see, all that Golo fluid content is coming on the next line.
Similarly, it accepts volume, in fact, the reverse.
Let's say that, as you can see, the content stops from the second line and it goes to the end.
And when it's about delusional, it moves to the line above it.
So that's how this rapid and most works.
It also accepts this value, no doubt.
So in case you don't want to rob the elements, you could simply do Nora.
Similarly, let's try this Wahidi for them as well.
So coming back, Hugh, let's remove this.
Let's change it to.
Let's save it.
And right now, as you can see, there's not overflow because it does not give a fixed height to our
flex element.
So it's scrolling vertically.
So let's give it a height.
Say a hundred we put.
Let's save up.
As you can see now, it's overflowing outside.
So that's changed.
So let's say Flex Rock.
Let's go live underground.
Now, as you can see, once it reaches the N word quickly, it creates a little column.
And once it reaches the end, it creates another column.
Let's try giving it a value, the most corrupt.
So we're up reviews, let's say.
And now, as you can see, it starts from the end.
So one them then do column.
And then the third column.
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 again.