Hello, everyone, and welcome back.
In this we do we will try to use Flex to design this dog bar.
So right now we have all the components, we've got the logo, the menu items, search box notification
bill on the profile pic.
So we just have to use Flex to design this layout.
So let's give it a try.
Let's bring up a good editor.
So as you can see here inside the novel, it's got all these different components less valuable.
Good to hear.
So what we want is, do you want two groups?
First group.
This Eduarda on these three menu items to be together.
And then another group to bring the search box notification and provide back together.
And for that purpose, you can use def.
So let's try that.
So we've got to do a few.
All right, let's save it.
So coming back to.
Let's give it an I.D., see?
Left menu.
That's a good.
Let's add some science to this left many.
So now what you want is everything to be next to each other.
So for that, we can simply use displayed flakes.
Let's save it.
Similarly for the stick insect we can adopt in there, live and use this bleep.
So.
Let's just drop all these things together.
Let's give it an I.D., see right menu.
Let's savor.
Let's give this also display flex.
Let's save that.
Now, as I can see, both the menu items are grouped and as you can notice, these menu items aren't
aligned in the center vertically.
So for that, we can use a line items.
We can simply use the volume of senator.
Now, as you can see, for the first one, everything is central line.
Similarly, it's do it for the right menu as well.
So a line items center.
And now, as you can see, everything is centered the vertical.
Now, another thing that we need is we need to put them next to each other.
But with all this space in the middle.
So let's try that.
So if you see, I could here.
So both these dudes are inside now.
So we can use display flex now as well.
So now on display flex.
Let's save it.
And as you can see, both are next to each other.
But we want space in between.
So does that ring any bells?
You can simply use justify contant space between let's save it.
And as you can see, these are in the same lane, but have all the space in between.
Similarly, we need some space over here between all these elements.
So it's going back to you.
So for the notification, I can we already have an I.D., so let's give it to margined left to succeed
Dick Silts.
And margin, right, say 16 pixels.
Let's bring it down here.
Let's say it.
As you can see, we've got the same dog bar that we wanted to design.
And that's how you use Flex to design Lautz.
I hope you guys enjoyed this video.
If you have any doubt, feel free to comment under we're discussing.
See you in the next video.
Bye.
I'm Dick.