MaterialUI Flexbox & Grid Tutorial

man i can't wait for these items to be next to each other and having my layout look all cute let's go and open up our application really quick and see how it looks wait wait a minute has this ever happened to you let's talk about it [Music] hey what's up guys it's leo and today we're back with another tutorial and this one we're going to be talking about css flexbox and grid and tailored specifically to material ui so if you're anything like me up until now i haven't really sat down and kind of studied how flexbox and grid system works i'm kind of a trial by error so i just kind of just start throwing up different configuration and hoping that my layout ends up being the way that i have it envisioned in my head um and i decided this last weekend to actually sit down and kind of study it a little bit and i figured if maybe there might be some other people that are just kind of like me kind of wanted to make a quick tutorial explaining how flexbox and grid works with material ui so that way we can all get uh layouts working just how we want them to be if you're already familiar with how flexbox and grid works you can go ahead and skip this section i'll have a little time stamps below but just in case we have some people that don't really understand how they work i made a quick little presentation here using beautiful.ai just to kind of quickly explain how each of them work individually so let's start out by looking at what flexbox is so essentially flexbox is a one-directional layout strategy that helps you and provides a more efficient way for you to kind of lay out a line and distribute different types of elements within a container meaning that you can put different items and you can line them so like let's say for example you want two words to be next to each other you can put these as flex items within a flex box and it makes it easier to kind of space them out give them some padding some margin uh maybe even order them separately so it's really useful for say for example smaller components or just for small scale layouts and just as a quick note in this presentation we're looking at css flexbox and the css grid and there's a little bit of difference between the css flexbox as the material ui flexbox implementation for example the css flexbox allows you to go in the row and the column direction while material ui's implementation only allows you to go in row and row reverse but we'll get back to that a little bit later in the video next let's take a quick look at what kind of properties the flexbox has so before i mentioned that we have the flexbox container as well as the flex items that are within the flex container and they have different properties so a couple of these again i'll put a link in the description below that you can go to the documentation it explains a little bit better and there's a lot of words on this slide but something you just need to know is like for example display which kind of just defines that it's a container we have the flex direction in which direction is the flex gonna go for example row goes to the left to right row reverse goes from right to left uh we have wrap whether it allows the items to wrap if necessary uh justify content defines just alignment between within the container where the items should go things like that and then the item props for the flexbox is that you can order them in a specific order so usually it goes in by source order meaning by from top to bottom the way that you define them or you can switch it up and give them a specific order that gives you a little bit more freedom with that then you have the flex grow flex shrink flex basis so flex grow just defines the ability for it to grow flex shrink is ability for it to shrink or you can just uh define flex here which is just a shorthand for all three of them and then the line stuff is pretty much just allows you to override whatever the containers uh align items property is and you align itself as its item next let's look at css grid so essentially css grid is a two-dimensional grid based layout system it's uh pretty useful for kind of larger scale and more precise placements um you might think that a lot of people say like if it's one directional use flexbox if it's two directional use grid but you can use grid for one directional uh layouts it's really powerful in that it allows you that gives you the freedom to kind of do that and they both really work well together as well so let's look at some of the properties that grid has to offer so similar to flexbox uh grid also has containers and items so flex container as well as flex items and a lot of the properties that it has are pretty similar in that you have like your justify your align items justify content place content things like that uh justify self align self so pretty much very similar to how flexbox works and that's pretty much it for this presentation let us get into some code so first thing we're going to do is we're going to open up visual studio and uh just as a note i do have a starter project here that i'll put a link in the description below for you guys to follow along and once we have that let's get started with this so first thing i'm going to do is i'm going to actually go ahead and start looking at flexbox by creating just a simple flexbox component and what i'm going to do is just define this it's pretty simple right now and let me actually go ahead and start this up and i'm going to be using react for this but i'm just going to be using it all in a single page so that we can kind of just uh get to see how it all works and that opened up automatically but let us actually get our flexbox component here so that you can actually see what's happening and then if we go back to our application you can see here that we have the hello and let me actually split the split this up and so we can work uh with both of them at the same time all right so let's look at this flexbox component and if i actually refresh this this should say hello bone okay there we go so what is happening in this component essentially what i'm doing is i'm just creating a container right now and i'm giving it this border color of red so just so we can see how the page is structured and we're giving it a height of 800 px which is a little bit longer than the page but that's okay and then i just have this typography component that just says hello bum and let's see how we can kind of change this uh to use flexbox and make it a little bit cooler but first thing i wanted to do is i wanted to show you guys the flexbox material ui um documentation and show you guys how useful this is so again i'll put a link in the description below to this documentation but material ui really has great documentation when it comes to these things especially the flexbox and the grid components so pretty much it gives you a bunch of different examples of what happens when you play around with the different properties so for example display the flex direction here you can see we have the row and row reverse flex wrap justify content and it gives you all these examples so if you guys ever just get confused you can go here and just kind of start playing around with different examples and now that we've seen that let's go back to our app and our flexbox here and let's start changing some things around so what i'm going to first do is i'm going to actually change this so instead of a typography i'm going to change it to be a flexbox and i'm going to add a border style just so that we can see where this flexbox container uh kind of starts and ends and one thing that we can do to make sure that this is all working correctly is that we can actually let's go ahead and define a flex direction and so the default flex direction is row but it also does support row reverse which just means start at the other end of the row and you can see here that this should actually be putting our item to the right and having it over here but it's not and the reason for that is because actually flexbox does require you to first go ahead and define that it is a flex uh display so what i need to do is i need to make sure that display is equal to flex um and like this and so once i save that now you can see that this allows me to actually have my items within my container grow shrink and things like that and again if you guys remember flex is just a shorthand for flex grow flex shrink and flex basis so just by defining display as flex that means it kind of gives it a true value to all of those meaning that hey allow all of my items within the box to grow shrink and do whatever it needs to with its space and to show this a little bit better what i'm going to do is i'm actually going to add a couple of flex items to this flex container and again if you remember if your show display is flex that kind of tells flexbox like hey this is the container so then what i can do is i can actually go ahead and copy these boxes here and put it like this meaning that hey these are the flex items within the flex container and as you can see this is kind of all over the place and if we switch this to row here you can see now that it's kind of correct because again it goes by source order so from top to bottom it will if we don't specify the order it will go from top to bottom so if we have it as row reverse what that means is that this item here is going to be the first on the very right but for now let's switch it up to row and actually go ahead and um play around with the ordering of this so let's do uh let's put shut here let's put world of top maybe something like this and then what we can do is you can see now it's all over the place but one cool property that flexbox items allows you to do you can actually add a specific order to your flex item so what i can then do is i want world to be the second item i want hello to be the first item i want shut to be the third item and i actually need to write order is equal to and then i want box to be the fourth item and you can see that after i save that even though they're not necessarily in the source order from top to bottom because i specify the order property it actually has them now in the correct order that i want them to be another pretty cool property that a flexbox item actually allows you to have in material ui is you can actually specify the padding and the margin for a specific flex item so for example if i want the world to have the world war or the world word oh that's hard to say uh to have one for the padding value and one for the margin value i can do that and i can add that to every single flex item and they can have different uh values so for example i can have uh the margin b2 for that but let's just make it one to make it look a little prettier in that regard and another cool thing that we can do actually is we can actually specify like flex grow flex shrink properties at the flex item level so for example if i were to structure this and say flex grow is equal to one on the hello what that means is now our container knows like hey i want this specific flex item to take up as much space as there is left over or at least to grow as much as it can and the other items just kind of gather their space and then this one kind of covers the rest of it we can also start playing around with uh the justified content as well so what we can then do is like right now it's kind of like this but if i were to go ahead and let's remove flex grow and then let me add the justify content is equal to center here what you'll be able to see is now it kind of centers all of our items and started from the middle as opposed to the beginning so that's pretty cool we can do flex end so that'll kind of just do the same thing like let's start it at the end but for now let's just leave it at center and another thing that we can kind of do is one thing that uh i pushed upon is that we have the align self and align content and these kind of require the component to have a little bit of a set height so what i mean by that is if i go ahead and set the height to 100 here what i could then do is i can align my content and then i or not content if i align items is equal to flex n for example you can see here that now it kind of has more space and the line items again it kind of tells it where to go on the row so if i do flex n it goes to the very bottom of the row if i do flick start it goes to the top i can do things like uh flex or i can just do center which will center it and so for now let's leave this at flex in and this is uh kind of since this is uh based on the column it does require it to know of how much height it has or how much space it has left over uh in the column axis and again the cool there's another cool property that you can do on the flex item level and that's called a line self and what you can then do is this will allow the specific flex item to override whatever the container align items is so for example right now it's flex end but if i do flex start for example this means that this specific flex item will actually override the one from the container and you can see here that it's aligning itself at the flexstar as opposed to the flex end with everybody else and yeah that's pretty much all there really is to flexbox so now we can actually go ahead and let's look at how the grid component works for material ui and what i'm going to do is i'm going to actually go ahead and create this grid component so similar to how i had it before it's just a simple container with the distance of large and then what i need to do is instead of flexbox here i am going to get my grid component and that should be able to refresh this and now all we have is just the outline of the entire container and as you can see here you can actually one cool thing is you can actually specify the container or the grid to have a specific component uh tailored to it so for example here i'm doing grid component is container but i don't actually need to do that what i could actually do is it has a uh it has two boolean values of component or item and these can be worked together so you can have a grid component item not component oops uh container so grid can have these two kind of values where it's container and atom it can be one or the other or both so these uh work together but for now i'm going to just leave it as a container like this and let's go ahead and actually add our first couple of items here to our grid container and you can see here that we've added three items and these are pretty much just simple little hellos and i've added the border style solid so we can see kind of where each of them are and as you can see here that they're pretty much in a row but the interesting thing about this is that it goes all the way to the bottom and the reason for that is because the default align items is stretch meaning take up as much space as you can and before we kind of start playing around with this let's actually go and look at the grid documentation and so similar to how we looked at flexboxes you can see that their documentation is also really really good and it gives you a lot of different examples such as like spacing kind of gives you the basics of your grid as well as these things called grid properties so if you're not familiar with grid properties it pretty much allows you to set different break points so for like extra small screens small screens medium screens large screens and then you can define different sizes so for example it's all it by 12 so an entire row full width is 12 and then you can kind of split it up by different pieces as long as it adds up to 12. so that's really cool and then you can also have this is my favorite part of this entire document and it's this interactive piece right here and what this allows you to do is it allows you to kind of create different configurations for your container and see how the items within it should look so for example if i want everything centered in a column i can do direction column justify content center align item center and you can see that it gives me this example here of what my item should look like on my page and this is really powerful and again there's a bunch of different uh properties that you can use with grid containers but these three are the most important and these are the three that i usually use the most but now that we've kind of looked into that um i'll also put a link in the description below to that document just in case you guys want to go over there and play around with it but let's get back and see what we can do on our application so if we actually go ahead and so for now i have uh two different things so i have the direction is row justify content is center and then i have three different items of hello with the border style of solid and so you can see here that now they've been centered if i go ahead and align items is equal to center this will then override the default of stretch and where did that go okay there it is it kind of let me actually make that flex start so that we can see it at the top and so you can see it's now at the top it's in the center and the again the default for a line items is stretched so if i do remove if i do set this to stretch it kind of goes back to how it was before um and so yeah pretty cool really useful and as i touched upon really quick is the cool thing about grid items is that you can actually specify different break point values so for example xs is equal to four and so again what these do is it pretty much just splits it up and it gives it a width of depending on how you can split up the entire 12 uh value of the row so this will pretty much give this item four spaces of the twelve this will give this item five spaces of the twelve this will give it one item of the twelve and the reason that this is kind of out of the box is just because we're pretty zoomed in right now so that's why um it was out but if i change it to two you can see that it works fine and one thing to note is that this kind of works in a left to right manner so what do i mean by that so for example if i make a quick note here oops i can't make a quick note but pretty much what this means if i go ahead and define this as md6 what this means is that all of the so xs is going to take up four places and then all of the sizes up to md are also going to take up four sizes so pretty much what i'm saying here is xs is equal to four so then it pretty much means sm is equal to four and it's the same way the other uh the other way as well so it also continues so that means once it gets to md break point it's gonna say md is equal to six but even though we don't define it this also means large is equal to six and so it kind of works in that regard so if i just leave it as xs that means that small medium and large break points all get the four kind of units of measurement and this is really powerful later on when you can kind of construct different types of layouts per screen size so then you can use different break points to kind of give it different space values and things like that so for example if you want on the mobile phone to look a certain way as opposed to on a website um you can do you can play around with these break points and it makes it pretty easy to do and let's keep playing around with this and so what i'm going to do is i'm going to change some of these values around and so what i'm going to do now is i'm going to switch it to a column i'm going to justify and align items of stretch so i went ahead and actually removed the border around it and the reason for that is i want to show you this spacing prop here and so if i remove spacing you can see that the words get closer together and if i put one then that means they kind of they start to split up a little bit so this kind of lets you uh put a little margin and padding in between your items and like three and you can just keep going as high as you want and so pretty much what it allows you to do is it allows you to give a consistent spacing to all of the items within your container and now the interesting thing about this is if i actually go ahead and re-add the borders and add do a little couple of changes here so now we change the direction to column center and stretch you can see now that we have this side and then we have this side as well and then you can see that these are in the center and it's working correctly in the column respect and one interesting thing to know is you can actually have containers within your container and so what we can then do is actually if we actually go ahead and implement it like this now what we're saying is we have the same kind of setup here of column center and stretch and things like that and then we have our first item which is just taking up 12 spaces so that's this uh this side over here and then what we can then do is we as you can see here we also have this grid item and then we have a container of uh and then we want to kind of like switch up the values for this specific container so what i'm saying is for this column over here i actually want it to be another container with the direction of row and justify and align items of center and with spacing of three so now you can see it's in a row as opposed to the column format that we had defined in the parent container here and one of the cool things that i mentioned earlier so right now you can see that i have it split up between items i personally like to keep it this way because it kind of gives the spacing a little bit better but one thing you can actually do is you can actually combine the two and have access to both of their properties so what i can then do is instead of having an item and then a container within it i can combine it to a container item have all of the access to all of the container props but i can also have access to the item props which is giving it these property values here so if i do something like this you can see here that now it's a little bit different and the reason for that is because we don't have we aren't giving this enough space so if we give it eight space you can see here that actually it still has the direction row the justify content center align item center different spacing values so i can change this to three or two things like that and i also have access to break points and you can play around with that just again be careful with spacing that's kind of one of the things that i've always got a little bit confused on so that's why i like to do it the other way but this works as well and yeah that's pretty much all there is to this video i hope that uh this helped you guys understand css flexbox and material ui flexbox and grid a little bit better i'm glad that i took this weekend to kind of study it a little bit more and kind of come up with this tutorial so that i can help other people that may have just been doing it the way that i was doing it which is just by trial and error let's just throw a bunch of different configurations and hope that it ends up the way that i've been expecting it to um so yeah i hope this was helpful if you guys enjoyed the video please leave a like comment and subscribe and i hope to see you guys in the next one thanks [Applause] so [Music] you

Channel: Leo Roese

Views: 1,981

Rating: 4.9365077 out of 5

Keywords: javascript, react, react.js, material, materialUI, MaterialUI, css-flexbox, flexbox, css-grid, grid, css

Id: hY2Pg1kQu1k

Length: 21min 20sec (1280 seconds)

Published: Sun Aug 29 2021