Complete CSS Flexbox Tutorial using Tailwind CSS

[Music] hello and welcome to tyrus web development tips and tutorials this video is a complete guide to all the available flexbox utility classes in dalvin css i'll explain each of them practically with simple examples if you already know the basics of css flexbox that's great you can skip the first few minutes but if you don't know much i will help you understand the concepts better flexbox is a method that allows us to layout items in one dimension horizontally or vertically before flexbox we had to use floats or tables for layouts and some ugly hacks to achieve the intended layouts but with the use of flex it's much simpler to achieve the same provided you understand all the properties of flexbox so to start with a flexbox means a container usually invisible within which we have the items laid out the way we want container is the parent and these items are the children again these items can themselves be flex containers for smaller items within them and so on to start using flexbox the first thing to be done is to set the parent element to display flex in regular css it's display flex while entailing css the utility class name is just flex okay let's jump into practicals now let's go to play.tailgancss.com and let me remove all of this here and let's start from the beginning so let's have a parent container div with class flex and now within which let's have some small divs let's call them blocks block one lock two block three and block four now you notice the moment we have added flex they are laid out horizontally so if you remove that this is obviously the default behavior right each div is a block element which occupies full width so the moment we add class flags by default they are laid out in the horizontal direction so using tailwind classes let me add some padding to each of them and maybe some color let's say vglo200 and let me repeat this with slightly different colors so maybe blue green and red okay so now that we have a container parent container and the items let's explore the next set of properties that are available we are right now exploring the properties of the parent container further we will move into the properties of the child container so the first one being display flex by default we saw that the items are laid out horizontally but what if we want to change that which is why we have all of these which we have the flex direction property in regular css and the values for which is row row reverse column and column reverse we'll see all of that in action in a few seconds the same equivalent in tailwind is just flex row flex row reverse flex call and flex call reverse so here by default it's flex row so nothing changes but if you make it flex row reverse you will notice that it's the reverse so we had it going from left to right now we have it going from right to left this is useful in some cases next if we change that to flex call you will notice that they're laid out vertically now and then flex call reverse does the exact opposite so we're going from bottom to top instead of top to bottom let me leave it at flex row for now next comes the properties flex wrap that is whether you want the flex items to move into the next line if they overflow or just to stay there and also wrap reverse defines how exactly it wraps the tail and equivalent for this is just wrap wrap reverse and no wrap so it's just these values now let's see what it does but to see that we need to have slightly bigger blocks let me add some content here now that we have some extra content here you see that the lines automatically broke into two lines because by default flex wrap property is no wrap so if you add no flex no wrap here that's what actually it is but instead if you want to change it to flex wrap that is we are okay if it goes into the next line just don't you know compress the width that's what we're trying to say it and if you make it flex wrap reverse you see instead of going from top to bottom now it goes from bottom to top so it wraps in the reverse direction this is about flex wrap properties again let me just remove it and leave it at flex wrap one thing you must notice here is that the width of the item is dependent on the content within right if you have come across css grid it's different in grid you mention the exact width right so either all the columns are of same width or you know it's in multiples of the width of one of the columns one or two of the columns but in flex that's the main difference between css flex and css grid if you want them of some sort of an equal width or in a proportion then you better use css grid but if you want the width to depend on the content within you use css flex so you don't have to worry if this is a you know if this has a lot of content like say let me add some lorem ipsum text you see since this has a lot of content it takes a lot more space than the other three here okay this was just for demonstration i'll remove it and we leave it at this let's continue so we have covered the flex direction flex wrap now is the time to see how to align the content vertically and horizontally within this container for that what we have is justify content now this is where a lot of confusion occurs so let's go let's take it slow we use the justify content property to space out the items horizontally for a flex row but if you're using a flex column justify content is what defines how the items space out in the vertical direction so if you are using flex row your main axis is the x axis that is horizontal and justify content defines the spacing of items in the main axis whether you're using flex row or flex column it defines the spacing in the main axis that's what you need to remember so the tail of an equivalent classes for this is justify start justify n justify center and so on so the content word is skipped and the flex word and space words are skipped it's just justify start and and so on now let's see each of this in action for this i might have to go back to what it was smaller divs that's when uh you know justify content has some meaning so again justify content is a parent property that's where that's why we're adding it here if you see justify now forget about justify items this is not a flex property let's start with justify start now you will not be able to see much of a difference because justify start is the default value but when you come to justify end you see everything moves towards the end so justify start says the start of the main axis and justify end is the end of the main axis now what i mean to say is if you make it justify end and instead of having flex row if you make it flex row reverse you notice that now justify end is this side right so if you use flex row reverse it might be slightly confusing let's go back now justify end then justify center so it puts it in the center of the main axis justify between spaces out the items as much as possible so that's the maximum space line that's possible justify around does give a little spacing on the right and the left which is half the spacing in between the items which means whatever spacing is here these three are equivalent spacing and these two spacing at the end is exactly half of this space but justify evenly make sure that even these spaces are same so how many other spaces are there around each of the items are all equal you would usually use something like justify center or justify between of course you might even use start and end all right so let me just leave it at justify between for now and let's check out the next properties now this was about spacing the elements in the main axis so in our case because it was flex row we saw the spacing of elements in the horizontal direction now next comes align items these are the properties we use to align the items vertically but in flex column we will use these to align them horizontally so it might be a little confusing if you're new to this concept but slowly you'll get a hang of it and the tailwind equivalent is here notice the word align is missing and instead we use items start that's where many people think that these properties are missing but they're not so you use item start items and item center and so on now let's see them in action for this we might need a slight variation of uh the height so what i'll do is i'll increase the font size of this make it text 5xl so you see the you know height is increased but did you also notice that the height of all the other blocks also increased that's because by default the value of align items is set to items stretch so that's the default which is which means it says stretch all the heights because it's in the vertical direction right stretch all the heights to match the highest one right but instead if you make it items start you notice that all the items start from the same line and of course items end will make all the blocks align at the bottom as you might have guessed items center makes it align exactly at the center so this is equivalent to vertical align middle but if you notice sorry let me make it center yeah if you notice this looks quite off like if you remove the background colors here at least the first two you'll notice that these are not aligned the bottom of the text is not aligned which might look a little odd which is why we have something called items baseline that is when you set it to items baseline the base of the font which whatever text is there it gets aligned in one line you might be able to see it better so you see this is there's an invisible line going exactly below the text when you want text to be aligned like this you use items baseline otherwise you can use items center or whatever you know works for you so let's keep it at item center and i will add the colors back bg blue 200 and bg yellow 200. now before we move on to the next set of properties i think it's better to show you how flex how these items appear in the vertical direction so if we set it to flex call and let's give a height to this whole container maybe h 80 yes so you see it's h80 that's the height of the container if you want better view we can even add a background maybe a very light gray so that you know this is the container and because we have justify between right justify between is what determines the spacing in the same direction as the flex okay so because it's column justify between makes it a line gives it as much space as possible the same thing if you make justify center you can vertically align it in the center of the block okay so justify center item center is exactly what you need to put something in the center of the page or center of a container right horizontally and vertically again if you make it justify end or justify start this is what you see evenly and you know around as well okay let me put it back to justify between and now item center this is what makes the items appear in the center of in the horizontal direction because we're using flex call but if we say items stretch it stretches items start this is what it does items end items what else do we have baseline doesn't work in column because it doesn't make sense it's it's the same as items start and yeah so that's what we have available let me change it back to item center and also let me remove this or i can keep it and let me have another one with a little bit of margin and here let me change it to just flex so you really know the difference and i will copy this link so this link will be available in the description below you can play with it and make the changes the way you want let's say i'll leave it to item stretch so you can explore this and make more changes to understand yourself now let's move on to the next set of properties so far we saw justify content and align items next we have aligned content now this is very similar to align items only thing is align items works when the flex wrap is set to no wrap and align content works with the same set of values when the flex wrap is set to wrap that is when the items wrap to the next set of lines this is what works and the table and equivalent is content center content start and so on again the align word is missing here that's why the align word is missing in both of these because we use items and content everything else remains the same center start and and so on let's see this practically for this we will have to add some more text and we need to say flex wrap okay let's add some more text okay now we have them wrapping and you see there's some space immediately between the two blocks because i think the default value is set to content around let's check it out so now if you make this content center you see that they are in the center the reason for this small space here is because uh the height of this is you know greater everything is in the center as much as possible content start pushes it to the start of the main axis sorry the across axis content end pushes it to the end content between make sure there's as much space as possible and then content around is what is the default it gives you know double the space here and half the space around it and content evenly spaces it out evenly so this is the spacing between the elements when the flex wrap is you know this is for the flex wrap property so if we set this to content center and we set this to items end you will notice that that gap is gone or you can even say items stretch so that these items stretch across stretch to make sure that they occupy the same height as this but it doesn't affect this block right so of course this might be confusing again but the more you use it the more you'll get used to it and if you set this to justify center this is what you have again i will leave this as it is you can play around with this we have covered all the properties of the parent element right what all did we cover we covered flex display flex we covered the flex direction either it's flex call or by default it's flex row then we have the flex wrap or the flex no wrap or flex reverse so it wraps in the reverse direction then we have the justify content properties which determines the spacing in the main axis then we have the align items property which determines the spacing in the other axis the cross axis and then we have align content which determines the spacing between the items that are wrapped okay with this much clear let's move on to the next set of properties of the child elements the first set of properties of a child element i would like to talk about is align self so with align items and align content that we set to the parent element we have given a alignment to all the elements but what if you want to align only one or two elements a little differently that's where we can set these properties to the child element that we want to align differently the tailwind equivalent of this is self auto self start it starts with self let's see what it all means so coming to the first example we have set items stretch right but what if we want the block 4 not to stretch fully but just stay you know to the start maybe for that only to this element we can set self start you notice everything else is stretched nothing else changes but this is set to start if we want to center it we can say self center and now that doesn't stretch it centers itself and again self end and self stretch is available which is obviously the same thing as the parent okay let me make this self center and leave it at that now you understand this the same case with flex column so in this case if you don't want the third one to stretch instead remain in the center for some reason you can say self center and again it works in the same direction as this items stretch so that's about the align self property moving on so far we spoke about alignment in both the directions horizontal vertical we spoke about flex direction we spoke about flex wrap now let's talk about the size of each flex item as we saw it automatically occupied the space based on the content within but what if we want to control that a little what if we want to make sure that some items occupy a little more space than the others that's where we have these properties flex grow and in regular css we have flex grow 0 1 and 2 3 and any such numbers but but usually the values used are 0 and 1 if you want to use 2 3 you can customize it in the tailwind configuration but for this the tail when equivalent is flex grows zero and just flex grow because flex grow zero means that you don't want the element to grow or increase in size but flex grow one means you're saying yes it can take up more space let's see it practically now let me open up a new play window this has too much already i'll share this link as well let me take the same thing and remove flex call let me also remove this and i don't need the height for now right so now you saw each of this occupies only so much as much as the content but let's say we want this one to occupy as much space available by default it occupies only as much space as required by the content that means flex grow by default is zero it's saying don't grow but instead let's change it to flex grow one that is just flex grow and immediately you notice that all those spaces are gone and they're occupied by this one block if you want block three also to occupy a lot more space you can again set flex screw to one so it divides the width proportionately that you know if you if you notice the width of the blue block is greater than green block it proportionately increases the width based on the content now there's a particular calculation you don't have to know much about it you're just saying flex group so you're allowing both of them to grow so now you don't see any space let me remove this so you're able to see this better in action okay let me copy this and paste it again for the next example right and the next example is the opposite of group that is shrink so you are telling whether the item should shrink or set the width to the content and the tailwind equivalent is again similar lecturing 0 and flex shrink the default value of flex shrink is one so in case of flex grow the default value was zero but in case of shrink the default value is one so by default all the elements of flags don't grow they occupy only so much as the content is required but they shrink if required so when we applied flex wrap the items shrink in width right so that's the default behavior let's see another example of that now if we have a lot of content here something like this and you notice that it moves into the next line right what if we don't want that whatsoever we want it to you know be in the same line we can say don't shrink right because by default it's shrinking we can say flex shrink zero so you notice it doesn't shrink it takes up all the space that is required by the content and the rest of the blocks shrink as much as possible even if it makes the parent container overflow right so it's saying it's saying don't shrink no matter what now you might be wondering where are these flecks grow and flex shrink useful in real world let me show you some example so let's say we have some okay this is the parent container and let's say we have two child containers one is some text low remember some text and on the left side let's say we have some icon okay and let's say we have some circular shape oh let me give it a width 16 height 16 a background of maybe cyan 200 and then i want this to be circle right i say rounded full do you already notice that the circle is shrinking it's not a circle anymore we don't want this behavior right if if let's say the paragraph is small then great so if the paragraph is only so much then there's enough space for it to look like a circle but as we saw if the paragraph is really large then this shrinks we don't want that to happen which is where the flex shrink zero is useful so you say flexuring zero don't shrink this and you know give it as much space as required this is just one of the use case there will be a lot more and in i think the flex grow use case is more evident because this is generally what your navigation bar looks like the center space is you know full here comes a logo and generally here comes the navigation items and this space sometimes you can have whatever content required or you know maybe an image or something else like that that's where the flex grow property becomes useful let's move on next comes the property which is just flex this is actually the shorthand for flex grow flex shrink and something called as flex basis which we haven't yet covered now what is flex basis now flex basis tells exactly the amount of space that it has to occupy so it's not telling whether it's uh you know you have to grow or shrink it's saying you know it's actually giving the width in percentage either zero percent or fifty percent thirty percent or even something like 300 pixels nrem and things like that so that is a different property flex basis for which there are no tailwind uh utilities because it's very rarely used i'll also show you how to customize it next but this flex is the shorthand property and generally the values used are these that is one one zero percent which is grow one shrink one and zero percent i'll show you where this is used then one one auto zero one auto and none the equivalent for them is flex one flex auto flex initial and flex none i will not be covering of you know the three of these below but i'll show you what flex one can do let me add some space here again let me copy this and put it here let me just give flex 1 to each of this sorry let me space the mod a little more so let me add flex one flex instead of flex grow flex one flex one and flex one so do you notice now we have all four devs occupying the same space because we are saying you know it it grows and shrinks by equal value and then the flex basis is zero percent that means it's the same size basis is the equivalent of width for flex items so it's saying 0 which is same as 25 but what if you want an exact value so let me remove this third block and let's say you want this as the sidebar left you want this as the sidebar right and you what one this is the main content and let's say you want this as 25 percent you want this twice the width and you want this i mean that is 50 and you want this 25 percent yes we can customize it using tailwind so if you need something like flex basis 33 that is you know say three columns or 33 percent and 61 67 or if you want something like 25 percent which i just spoke about this is what you do you go to the tailwind config tailwind.config.js which i will do next and you set this i'll show you exactly how it's done and then you can use these classes flex one third because 33 is one third 67 percent is two thirds and 25 percent is one fourth of course this can be anything instead of 1 by 3 you can say 33 exactly and then you say flex 33 but that's a little more confusing which is why i thought 1 by 3 suits a little more right let's do this so if you go to the config file within the extend block after whatever else is present here you can say flex and whatever is the class name that you need after flex don't worry about this error it will get fixed in a moment and then the value for this is one one that is flex grow and flex shrink and then 33 but what we want is 25 right so let me change it 25 and then we want 50 so we do 1 by 2 and then 1 1 50 again like i said you can you can as well say 25 you can say 1 4 if you need so this is entirely up to you i'll make it one by four this is still loading but let's continue and here i can use flex one by four flags one by two i need to remove this and flex one by four so you see we have this occupying twenty five percent fifty 50 and 25 now you find this useful right actually if you need such a behavior you'd rather use css grids but sometimes you might want to use a flexbox for some reason so if you really need this then you can configure like i just showed and you can use it great next we have just one last thing pending and that is the property of the child element which is order currently all the items are placed in the same order as it's mentioned or the reverse order if you uh use the flex column reverse or flex row reverse or if you want to change it a little more right for which we have order one this is the regular css so you can actually give any number to order but in tailwind css you have the utility classes from order one up to twelve so even if you have 12 items and you want to shuffle them up you can do that up to 12. beyond that you'll have to customize it or if you just want to set an item to first you give a you know a value a negative value of nine nine nine nine something similar to z index what you do right and order last if you use order last class then yeah it sets it to nine nine nine nine so it's at the end and then order none if you were to remove the ordering you use this so it sets it to zero we'll see where this could be useful now taking the example of the sidebar and main content this works for larger screens right but for smaller screens you will want them one below the other so you will want the flex direction to change from row to column but since tailwind is mobile first it will first be flex column and then for larger devices md we can say flex row so if you yeah this is how it works so here let's say this is this is great but when you go to smaller devices you don't want the sidebar to appear first you want the main content to appear first we can't change the order in the html right that's where the order property becomes useful so for mobile layout we need this to be ordered first right we want order 1 here or you can use order first here so it makes sure that the other two come next and for larger screens you can remove the ordering by saying order none okay we'll see if this works yes so it removes the order that means it follows the default order and then here this comes first this is just one of the use case of course it can be used elsewhere also that's about all the properties of flex uh for which you have the tailwind equivalence just one last thing i would like to cover here which is the spacing between these elements so by default there is no property in flexbox in css which helps you create some space that is one big disadvantage compared to grid in grid you have a gap that you can give but in flex that's not a property available but entailment css you can make use of the space x and the space y utilities first take the first one and just say space x that means space it out in the horizontal direction space x1 space x2 space x3 you see the spacing is increasing as much as you want so let me set it to space x4 but in case of flex call let me copy this again i'll remove it if we don't have the height okay and all of them are stretched we can make use of the space y utilities by giving space y one two three you see the elements get spaced vertically all right so this is not available in regular css but it's available in tailwind you can make use of it and give some spacing to the flex items this is about it i have covered everything that's needed but anytime you need to refer you know that the documentation is amazing right so the official documentation you can search for anything let's say you want to know about flex direction you can go to flex direction you can refer this and you can see how to customize it and you know if you need something like the like i said just space between right you the space y and the space x utilities there's something called space by reverse also so just in case you set it to the row river so column reverse you additionally give this class so that it adds the spacing in the right direction you can of course dive deeper into all of these concepts this is about flex a complete guide so i hope this covered a lot of stuff for you and i hope it cleared a lot of doubts as well if you still have some doubts you can mention in the comments below and i'll reply thank you for watching have great fun with tailwind and flex thank you for watching hit a like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from thyris

Channel: Thirus

Views: 35,791

Keywords: css flex, css flexbox tutorial, tailwind css flexbox tutorial, tailwind css flexbox guide, css flex using tailwind css, guide to flexbox using tailwind css, tailwind css flex examples, tailwind css flex utility classes

Id: X6FIydgCzzY

Length: 38min 16sec (2296 seconds)

Published: Mon Mar 08 2021