Chakra UI Crash Course #3 – Flex Layouts

In this lesson you’ll learn how to use the Flex component to create flexbox layouts using Chakra UI.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/chakra-ui-crash-course

🐱‍💻 Access the course files on GitHub:
Course files –

🐱‍💻 React Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 CSS Flexbox Tutorial:
On YouTube –

🐱‍💻 CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 Chakra docs –
🐱‍💻 VS Code –


Okay then my friends so we saw some of The basic components that chakra gives To us in the last lesson but as of yet None of this is really that impressive And nothing we couldn't do with just a Couple of lines of CSS ourselves but Where chakra shines is with some of the Layout components and also some of the More complex UI components so in this Lesson I'm going to introduce you to the Flex component and show you how we can Use that to easily create rows of Content using flexbox and basically Layout content on a page and we'll use The flex component to create a navbar For the website as well so first off Let's create that navbar component in a New folder which I'm going to call Components so any custom components that We make that are not page components are Going to go inside this folder and then We need to create that file which is Going to be called navbar.jsx Now inside this file I just want to buy And play a new react component so I'm Just going to use the shortcut RFC and Hit tab to do that and if you're using At least react version 16 which you will Be if you're using my course files then You can get rid of the react import at The top now by the way I can use that Shortcut RFC because I've got an Extension for vs code installed which is Called es7 react Redux react native

Snippets so if you want to use that Shortcut as well install that package But anyway we've got the navbar Component now let's embed that into our Layout component so I'm going to go to The root layout file which wraps all of Our page content and I'm going to set The navbar component just above the Outlets where the page content is Rendered and don't forget to make sure The navbar component is imported as well At the top of the file otherwise this Won't work so now we can start playing Around with the flex component inside This navbar before we do that I just Want to make it clear that this is not Going to be a tutorial about CSS flexbox I do kind of assume that you already Know the basics of that this tutorial is About how we Implement flexbox using Chakra ui's Flex components if you want To learn about flexbox from the Beginning I've got a tutorial all about That so I'll leave that link down below The video alright then so let's start Using this Flex component get rid of This div and instead replace it with a Flex component click on this to Auto Import it at the top And now this is basically output as a Div with a display set to flex so Everything inside this directly inside It becomes a flex item right So what I'm going to do is just so we

Can see this on the screen give this a Background of gray so gray and then dot 200 so a light gray now inside this I Want to Output four boxes so we have Four elements inside the flex component Right here I remember each one of these is now Going to be a flex item so they're going To sit next to each other on the page Now each box is going to have a width And height so width is equal to 150 Pixels remember these are just style Props and this is the shorthand save Height I'll say height is equal to 50 Pixels And then also we give each one A Different background color so I'll say BG is equal to Red for this one now Right here I'm going to just output Number one now I'm going to duplicate That So we've got four in total I'll change This to two this to three and this to Four and then they're all going to have The same width and height however the Background color of each one is going to Be different so we can tell them apart So blue and then we'll say green for This one And then yellow For the last one now if I save this Hopefully all these are going to sit Next to each other they're all going to Be 150 pixels in width as well so let me

Save and we need to before we do that Import the Box component so save that And now we can see at the top the light Gray is the background of this element Right here which is set to display as Flex if I inspect that we should see we Get a div right here on the display flex And then inside that each of these is a Flex item just a div So they're all sitting next to each Other on the left right Awesome now what we can do is spread These apart a little bit by using Different values for the justify content Property now the shorthand of that is Justify so this is just a star prop Again and I'm going to set that equal to Space Around oops get that off space Hyphen around so if I save that you can See we get Space around each one of These individual elements we can also Use a different one so space between Basically any of the different Flex Justify content properties that you want To use so we can see now the spaces Between and not on the outside edges we Can also use the wrap property so I can Say wrap Is equal to wrap And also add a gap as well equal to two So if I save that now and if I inspect Once we get to the width that we specify 150 pixels if they no longer fit on to

That row they're going to wrap to the Next row like so and you can see we get That little Gap as well between each of These items because we applied the Gap Prop okay So then that's the basic kind of flex Boxing action actually I'll show you one More thing here you can apply Flex grow So I could say Flex grow is equal to one Right here and that means it's going to Take up all the available space after It's taken into account the width of These other three so flexgro is equal to One and it should be much bigger this Green one which it is awesome I can do The same to another one so I could say For this one Flex Grow is equal to 2 this time And now this should be twice as big as This one because it grows into twice as Much space Save it and now you can say this is the Biggest and this is the second biggest And then 150 and 150. all right so That's the basics of this kind of flex Component of how we use it again I'm Assuming you already know the basics of Flexbox CSS because otherwise this might Go over your head this is just how we Implement flexbox in Chakra you are Using this Flex component right here Okay So what I'm actually going to do now is Comment this out now we know the basics

And we're going to use this Flex Component to actually create the navbar All right then so same as before we need To start with a flex component now I Don't want this to Output as a div I Want it to Output as a nav element so I Can use the as prop and say output as a Nav element I also want to apply some Padding to this so p is equal to 10 Pixels and also we will say in fact now That will do for now now inside here we Want some different Flex items by the Way if you can hear a load of noise in The background it's Hailstone in light Mod that's the problem anyway we want on The left of the navbar a heading so We'll use a heading component for that And we want to display this as an H1 now Remember the default tag for this is in H2 so we have to say as H1 and inside Here the site title will be dojo Tasks all right so Spell heading correctly Now after that on the right we want a Few different things we want An avatar eventually which will use a Box 4 to begin with so this is going to Be for the Avatar and it will just be The first letter of the person logged in M for Mario later we're going to use an Avatar component but we're not going to Do that just yet we will apply some Styles to this though so we'll say BG For the background color and that's

Going to be gray.200 and then we'll also Give this some padding which is going to Be 10 pixels all right so later on we'll Replace that with an avatar component Next I want a text component and this is Going to be just the email of the person That's apparently logged in so we'll say Mario at netninja dot Dev and then Finally I want a button component we've Not seen this yet a button like so and That's going to say log out all right so We have these four items which are now Flex items inside this Now the default Behavior is that they're all going to Sit on the left we need to import a Couple of these things the text and also The button Like so then we've got everything else If we preview this now we can see Everything sitting next to each other on The left which is fine but I'd like to Make it so that this sits on the left And these three things sit way over here On the right now how do I do that well I Could use a spacer so I'm going to use a Spacer right here And we need to import that component Like so and what that does is say okay Between this component and these three Components I want you to take up a load Of space so push all of this over to the Right and this stays on the left and in Between we just have loads of space if I Save that we can see now all of these

Are on the right hand side okay Now then what I'd like to do is align These items inside this now bar so that All kind of Central in the Vertical direction if you like so they All sits are the same line so the way I Can do that is by using a line items This is like the opposite of Justified Content justify content justifies things In the X Direction align items kind of Justifies or aligns things in the y Direction now I want them all to be Central so I can say Center like so and Now they should sit centrally like that Okay now what I could do is add some Spacing between each one of these items Right here by using a gap property on Here so I could say Gap is equal to I Don't know 10 pixels or something like That Save it and then we can see a little Gap Right here awesome I also want to show You another way we can do this we can Use what's known as a horizontal stack So that's a new component and I'm going To say h stack right here Copy that or rather cut it and paste it Down here so now these three elements or These three components are inside this Horizontal stack and what we can do is Apply spacing just to these three things So spacing is equal to 20 pixels for Example and that puts essentially a gap Between each of these of 20 pixels if I

Save that now Have we imported it no we need to do That h Stack So let me save that and preview we can See it does pretty much the same thing But now we can kind of style these three Separately from this using this H stack So sometimes I like to use this instead You can also have vertical Stacks this One is a horizontal stack all right So that's looking pretty good we have This nav bar at the top now basically Styled what I'd like to do is just style The button a little bit now I could add Individual style props like the Background the text color Etc but notice How we have hover effects as well it Gets a bit darker instead we can use a Different prop which some components in Chakra UI accept and it's called color Scheme so we can use any color from the Palette that chakra provides us with so I could say the color is purple and it's Going to use the purple color scheme for The button and now you can see it's Colored it purple the text is white and It still gets a bit darker when we hover Alright So there we go my friends that's pretty Much it for this lesson I hope you Understand now how we can use this Flex Component to create these different Flexbox layouts in the next lesson we're

Going to learn about another layout Component or rather two layout Components and that's to do with grid Layouts

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *