Learn Flexbox In 8 Minutes | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS

what's up developers is dory here and i hope that you're having a great day since we're going to talk about flexbox in tailwind before we continue on with the video i want to quickly let you know that you can support the channel through patreon where you can get access to my private discord group where everyone is helping each other out with their coding issues if you are interested to join the link will be in the description down below in the last video we touched on grid and i thought i'd make a separate video on flexbox even though you might think that the idea behind it is pretty much the same and to be honest it kind of is but a huge difference is the fact that grid layout is two-dimensional and flexbox is one-dimensional whenever you are in a dubio on which one to use keep in mind that flexbox has a better way of dealing with sizes of elements it can also be nested which means that you can start with a flexbox row but elements inside the row could be flexbox columns as you can see i've added two headers on my page the first one is the grid section and the second one is for my flexbox and that's what i want to do right now and that's what i want to do right now i want to start off with a layout and then i want to move on to adding flexbox let's navigate back to visual studio code right below our h2 which you probably don't have but recreate it let's create a div which will be our parent element and here let's create another div with a class of bg-red-500 let's make the text white and let's give it a height of 26. inside the div let's create a paragraph with the text of flex item 1. what i want to do right now is to duplicate it twice so let's do that all right the second one has a background color of blue it's flex item number two the third one has a color of yellow and it's flex item number 3. if we save it and navigate back to the browser you can see that our divs got printed out vertically so right below each other and this is alright because we haven't applied flexbox to it we got to go back to visual studio code scroll up to our parent element right here let's apply a class to it called flex with this another class is pretty important which is wrapping your flex by default a flexbox is not wrapped which is the class of flex dash no dash wrap but what you do want to do is to set your flex equal to wrap so just like this this will make sure that your row container will automatically move items to the next row if the item would overflow the main axis of the container if we save it and navigate back to the browser you can see that our flex items have been analyzed horizontally right now this is what the foundation is of flexbox the directions right now it is horizontally but you can obviously set it back to vertically let's navigate back to visual studio code and let's add a class to it of flex dash call save it go back to brave and as you can see the output has indeed been changed another cool thing is the fact that you can reverse the values so right now it's the order that we want to see one two three but let's say that we want to start off with three instead of copy pasting and reordering it we could basically say well we have a class called flex dash cool dash reverse if we save it navigate back to the browser you can see that the first item that we have is flex item 3 then 2 and then 1. the next topic is actually a pretty fun one which is the orders with flex since you can't specifically order your elements to showcase you this in the best possible way i'd like to navigate back to tailwind's website and let's search for order in here you can see 12 classes that you can use which is the same exact number as the grid and flex columns and rows that you can define by adding one of these classes you can determine which element should be first second turret and so on now besides the 12 default classes you've got three more classes the first one is order dash first which will be the first element that will be shown then we got order dash last which will be the last element and order dash none is this one right here it's basically none you might wonder when you will be using these orders since you can easily change up the order yourself whenever you want your main content to come before the other elements in the source order but you still display it correctly you'll be using this let's navigate back to visual studio code and before we can apply this to our class we need to remove flex call reverse what we could do next is to basically say that our flex item two has a order dash one so it's the first item let's say that flex item one is order dash two and let's say that the last one is order dash 3 which it already is save it navigate back to the browser let's go to our localhost and as you can see flex item 2 comes first then 1 and 103 right now the output is still not the same as what we did before with grid since the elements are full width and placed next to each other this can be done with a grow and shrink method in flexbox there are two classes that you can use in order to let a flex item fill in the available space the first one is flex dash grow zero this makes sure that your item can't grow now besides that you can use another function let's go back to visual studio code and let's actually remove our orders first because it will be annoying all right now inside our flex item number one let's add a flex dash auto class if we save it navigate back to brave you can see that flex item 1 took all the space that was available next to the size of flex item 2 and 3. now if we add the same class to our flex-2 so flex-auto save it refresh it you can see that the available space has been divided between flex item 1 and flex item 2. the same exact thing can be done to shrink a flex item this would decrease the size of an element i'm not going over it since it's exactly the same way as growing an element our flex items are allied next to each other you can add spacing right here in the same exact way as adding spacing to create items let's double check that let's go back to tailwind let's search for a gap you can see that gap is a utilities for controlling gutters between grid and flexbox items so let's go back to visual studio code let's go up to our parent element and let's say gap dash 4 and we could basically say that we want to set the height to full save it go back to brave localhost and as you can see we have three items right here with spacing this was it for this video where i showed you the basics of flexbox entailment if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit that subscribe button you

Channel: Code With Dary

Views: 26,316

Keywords: tailwind css, tailwind css tutorial, tailwind css crash course, how to use tailwind, tailwind ui, css tutorial, tailwind crash course, tailwinds css, tailwindcss tutorial, tailwind tutorial, tailwind tutorial 2021, tailwind tutorial css, how to use tailwind css, how to use tailwind css in html, tailwind 2, tailwind css 2.0 install, tailwind ui tutorial, tailwind 2.0, flexbox in tailwind, flexbox tailwindcss, how to use flexbox in tailwind, flexbox vs grid

Id: rRzeygfoHI4

Length: 7min 57sec (477 seconds)

Published: Wed Jun 16 2021