Tailwind CSS Tutorial #7 - Using Flexbox

a rather than gang so this website is still looking pretty pants so I think it's about time we started to work on the layouts of a few different things to make it look more like a structured webpage now to do that in CSS there's many different approaches two of the main ones are by using either flexbox or CSS grid now we are gonna look at both of those but in this lesson we'll look at the basics of using flexbox intel went first of all now I would highly recommend that you understand the basics of flexbox using vanilla CSS rules before you start this otherwise these tailwind classes might not make much sense to you so definitely check out my CSS flexbox series for the lowdown on flexbox first of all and that link is going to be down below so then what I'd like to do is use flexbox on these things right here these two little buttons so that they align over here to the right and maybe it will add some margin between them as well so then how are we going to use flexbox well it's these things right here that we want to be flexed items the login and signup buttons or links and in order for these to be flex items we need to make the things surround and get a flex container now the way we make something a Flex container in tailwind is by just giving it a class of flex that's all there is to it and if we save it and preview then nothing much has happened and that's because the default behavior of flex items is just to sit next to each other and that's all they would do it in the first place now that we can use the different justify classes that work with flex to justify these differently along the x-axis going across so for example if we wanted to justify these in the center we could use a class of justify - oops where spell is correctly - Center like so and that justifies these items in the center very easy way to Center something now the default that we had was justify starts that was the what it is by default and they go right to the start of the x-axis but we can also go to the end so justify end and it's going to go over to the right now that's the option we're ultimately going to use for our links right but let me just show you the others as well if we just say justify - we can see the different options we have so we can use justify between and that adds space between the elements but not on the outside we also have justify around and that puts space all around each element so we have it on the outside as well as the inside of the elements and we have something which is pretty similar justify evenly and that also puts space all around them as well so that we're going to use justify and like so let's take a look at that okay cool that's ultimately where we want them I do want to add a little bit of margin between them so on this one on the second one I'm going to say the margin to the left is going to be of strength - or something like that so let's say here ml4 margin left - to save that and now we have a little gap between those as well awesome okay so that's pretty simple right we just add a class of flex to the parent and how we want to justify them as well that was pretty simple now we can also justify things in the opposite axis as well so let me just add some separate HTML to demonstrate this let me come down here and I'm going to paste this in it's just a div right here with three divs inside it and it's three squares well not squares yet because we've not given them a width and height but one of them is going to be red one blue and one green we've seen these kind of classes before to color the background of something so if I save it a minute then we're not going to see anything because we've not given these a width and height now to do that using classes in tailwind is dead easy we can say H - and a strength I'm going to say H fall and then W - and a strength to give it a width I'm going to say six now if I save this we should see a small little red box awesome so let's do something similar for the blue one this time the height is going to be eight and I'm purposely giving them all different heights so that we can align them vertically in different ways and we're going to see that effect and the width is going to be six so the same should be a - and then down here will say height is going to be 12 and again the width is going to be 6 awesome so if we save this we can see 3 different boxes right here now the default behavior of these is to stack one on top of the other because we don't have a flex container yet and these are all block level elements so they stack one on top of the other but if we say flex then they should now sit next to each other which they do now notice by default they're all aligning at the top on the y-axis in the vertical direction right they're all starting at the top what if we want them all to start at the bottom well we can use a class to align them in that vertical axis and the class we use to do that is items - and then wherever we want to align them so if I say end then it's going to start them over here like this this is the end of the vertical direction this is the start this is the end right so the start was the default one we also have access to Center save that and now they're all aligned in the center now as well as aligning them in this y-direction we can align them as well in the x-direction so we could say something like justify center like that keep spelling justify incorrectly save that and now they all go to the center so that's flexbox in a nutshell I'm gonna actually delete this stuff because we don't want those three random boxes in the project but I am going to go down to the bottom and use flexbox right here as well now at the moment this is just a div which stretches the full width of the page now what I'd like to do is first of all give this a class of flex so this becomes a flex item and it's no longer going to stretch the hole of the page then I want to say justify and it's going to be Center so it appears in the middle ok so again a really nice way to Center an element so there we go that is flexbox we might use it in the future as well on more elements but hopefully this should give you a good idea about it and show you how easy it is to use flexbox in tailwind

Channel: Net Ninja

Views: 147,162

Keywords: tailwind, tailwind css, tailwind tutorial, tailwind css tutorial, tailwindcss, tailwindcss tutorial, tailwind crash course, install tailwind css, install tailwind, how to use tailwind, tailwind vs bootstrap, tailwind introduction, what is tailwind, tailwind node.js, tailwind node

Id: WK6u8YDYqak

Length: 6min 40sec (400 seconds)

Published: Fri Jul 10 2020