Using Tailwind CSS Flexbox Classes

hey everybody chris sev with better dev here today in this video we're going to talk about one of my absolute favorite features to come to css which is flexbox and this video is taken from my beginnertailwind.com course so if you do like this video please check out the course all right let's get to it so in the tailwind display classes down here under layout you see container here there's display right here we have block which is what divs are by default we also have flex so display flex is a really really cool tool in css that helps us do so many amazing things that were really difficult to do before flexbox and we'll demonstrate a lot of those in this video so if you want to get more familiar with flexbox and why i absolutely love flexbox here's a really good game to play online to learn it flexboxfroggy.com here you can learn all about the main flexbox classes and i think it's really important to learn these before jumping into tailwind because tailwind classes are great but they don't really work unless you know the tailwind the flexbox how it works so a really good tool to play around with flexboxfroggy.com we'll come into our code pen and here i'm gonna have four sections here so one is gonna be centering and let me zoom in a little bit so we'll have centering we'll have another one for building out a navigation and i want to demonstrate the different ways that flexbox is used in our day-to-day css we'll talk about creating a columns section we'll talk about building out a sidebar section as well and all of these can be easily done with flexbox so let's get started so each of these is going to have its own div and for this one let's just give it a background color and a height so that we can get started let's go background green at 700 and h64 which is the highest of the height classes and i'll press tab let that auto-complete let's do an h2 inside of here let's do for text for excel and this text here will be centered okay so it's not really centered yet i just typed in the word centered to get this centered before we used to have to do some kind of margin offset where we would push this margin left a lot margin top a lot but then it wouldn't really be fully truly centered in flexbox there's a different way to do it so when we're doing css you would type in the div and you would say three things display is flex align items is center and justify content is center and with those three things you would be able to center the contents of a div and that's amazing three lines to center something in css is fantastic so let's break this down display flex is setting the div to be display flex justify content is basically going to center along the main axis and when we're starting that means the x-axis so this right here it's going to center it and if i remove the align items watch this it'll get pushed to the top so what we can do here is bring this align items in remove the justified content and kind of see what that looks like okay that looks good right there so align items is the y-axis justify content is the x-axis or the main axis and i say main because sometimes it flips which we will talk about also but let's bring that back down so how do we do this in tailwind we don't want to write any custom css well we'll do three things flex to get it to be flexbox and then we'll say justify center which is justify content center right there and then we'll do items center and that will center right there and this is something that you'll do a ton in your css journey with tailwind is centering things so those three classes put together are very very powerful all right so let's take this a step further i actually want to change out the color on that it's a little too jarring just uh text green 100 make it look a little bit better cool let's see how we would build out a navigation now so let's do div right here we'll do background gray at 300 and give it a padding of 10. so no flexbox just yet but when we're doing navigations we'll usually have like a div right here for a logo or something and they'll also have a div for a navigation and right now they're going to sit one on top of the other and the cool thing about flexbox is as soon as you type in flex they will sit side by side there we go so now the next thing here is that usually the logo is on the left the navigation is on the far right you could do this by like absolutely positioning this thing right here but flexbox makes this really easy we have justify here for center so if we did justify center that would center everything right there but we also have a different class justified between so that's basically saying hey all of the space in between these two take up so that the first div goes far left the second div goes far right which is really nice and that's going to be it for our navigation and once we have that down we have a navigation bar which we are going to build in this course later on when we build out our main site all right let's talk about the columns section we're going to have a div let's go background yellow at 500 and a padding of 10. and then inside of this let's do three divs we'll say hello for each one and we'll do three of them and just to get a little bit more sizing on here let's go class background white and padding of two okay so now we have the divs which are white backgrounds right here and stacked as divs should be because they're display block by default to get these to sit side by side we'll say flex okay and by default they're going to sip flex which is side by side with each other but they won't be taking up the full size of their container which is totally fine so to get flexbox children which are these div div and div to be the full width and kind of take up space we'll add a new class to each of these called flex grow that is basically saying hey all of you children here kind of just grow to the space that is allotted to you that you have available and there's also flex shrink to say okay one of these divs should not be growing beyond the contents of itself so that'll be just that right there and then the other two will grow to the space available let's take this a step further when we go to mobile which is right here we probably want this to not be stacked sorry not be sitting side by side and we learned that in the responsive video if we wanted flex to only apply to large screens we just say large flex and everything else on mobile is block so that works out nicely let's change that to medium so we can not have to expand so wide there we go so one thing we can do here is get space x of 8 so that they're spacing in between each of these and that looks good right there but we only want that to happen on the larger screen so we'll say medium for that one as well next up we want these to have spacing on mobile so let's go ahead and say space y is four and i'm just picking out random numbers to get a little spacing here you could do margin bottom margin bottom or margin top margin top right there but i like doing it on the parent element so that you don't really have to worry about each of the children you just add it to the parent and it cascades down to its children but the other thing on this is that we don't want this space y4 on larger devices so we're going to say on medium devices we're going to reset that space y is zero and there we go we now have a grid area so that's cool right there so stacking on mobile and grid sections on desktop so that's a good way to use flexbox there so these three scenarios really really important ways to use flexbox in the wild we have one more here for the sidebar let's do div bg teal at 700 and a height of 64. and then in here let's do a div and let's say we had a sidebar div for sidebar and a div for content so normally we would want this to sit side by side let's give these a class is background orange at 500 and a padding of 10 just to get some nice styling in there well decently styling in there let's do bg teal at 500 and a padding of 10 around that as well and it keeps scrolling us up to the top so we have a sidebar and content sitting on top of each other to get them to sit side by side class is flex on the parent there we go so that's looking good and if we need them to grow to the height of their div parent so sidebar and content aren't the full height of the this right here we can say items and remember items is the y-axis in this case so we can say items center and that will kind of push them to the center of all of this but that didn't work because the div this one right here if we did a border and this is kind of how you debug in css right you do border border red at 100. so let's give it a little border see what this is at so this flexbox item right here isn't the full height of this so we need to say hey you go to the full height of your parent and now item center actually works so to get now the children to be the same height as the parent we say items stretch and sorry this keeps jumping we're almost done with this one so item stretch let's remove the border now we don't need that anymore okay so two more things uh this is kind of getting let's uh comment one of these out real quick there we go that's better so another thing we can do is set a width on one of the children right here so we'll say width is one fifth so that'll be about 20 percent and then the other one we kind of want this to take up the rest of the content and we learn this class over here right here flex grow so we'll type that in there flex grow so you the content take up the rest of the space you're allowed and the sidebar just take up this width one fifth and we'll do a little bit more of our responsive styling since we don't want the sidebar on the content on mobile let's do on medium flex and on medium right there and also on medium right here so those three classes will prefix with the medium responsive class and now on mobile we're stacking and then on medium sizes we have our sidebar back again if you didn't want the sidebar there you could also just say hey on normal screens hidden and then on medium display block so now it's hidden on mobile there we go and as we stretch it shows up again so that's a good way to hide it and show it based on uh responsive classes so let me uncomment this one right here and all of these four i believe all these four scenarios are really good to learn flexbox for centering for splitting things left and right for creating columns and for creating like a sidebar and content area so all of these four scenarios really helpful for flexbox and absolutely enjoy flexbox try out flexboxfroggy.com and we'll be using a ton of flexbox later in this course all right thanks for watching if you did enjoy this video please like and subscribe down below helps us out to know that we're doing good stuff here at better dev and of course if you did like the video please check out the course at beginnertailman.com see you next time

Channel: Better Dev

Views: 1,913

Keywords: web development, javascript, tailwind css, tailwind css flexbox, tailwind css flexbox classes, tailwind css flexbox navbar, tailwind css flexbox centering

Id: 86old-KflMU

Length: 13min 14sec (794 seconds)

Published: Mon Nov 15 2021