Tailwind Flexbox in Detail with React App

hey everyone and welcome back to daily tuition in this tutorial we're going to talk about Delvin CSS flexbox we are going to understand how we can use flex using till then in the react application using Telvin uses how to specify Plex class with HTML element and you are good to go you just have to specify the Plex class until when we'll do the rest to demonstrate how Plex Works in till when I'm using direct application I already set up the react app with Kelvin CSS so you can notice here I'm on the app.js file and here is my app component and inside this app component I have the division tag with the text app you can see my react application is running on localhost 3000 and I'm gonna have this app title right inside this browser now inside my app you can see we have a function here this function is used to get a random hex color from this function don't worry this function is optional it's just for understanding the div elements now because I already set up Kelvin inside this react application I can simply specify here Flex and this will initialize this div as a flex box when I save the changes you're not going to see anything because you need to add Flex item right inside this division tag so if I add here a div with 0 1 let me duplicate this and let me specify here 0 3 and 0 2. so you can see we have three divs right inside this layer now to see the height and width of this div I'm using this get random function I'm just going to specify Here style is equal to and in the object I'm going to specify background color and then I'm going to call this get random function something like this you can see this will specify background color to this first day let me do the same so let me duplicate this two more time and change this values let me get it off both these divs right from here I'm going to have here three there the size of these days is the width of this content you can notice using just a one class this will stack All The Stave one by one you can also use here Flex a world class and save the changes and this will do the same thing whenever I save the changes it will change the color of this division tags because react will regenerate this component and I'm going to have a random colors from this function so every time when I save the changes I'm going to have a new color to this tape now this Plex Pro is the default like direction to this place if you want to change the direction of this flag you can use your Flex call say those inches you can see now we have the flex position vertically now let me get rid of this now what if you want to specify equal weight to all these days You're simply going to call here a class and you specify a class name here basis book this class is going to specify equal weight to all the divs so you need to specify this class to all your ideas and you can see you're going to have the equal width to all your divs you are not limited to only specify equal width to all the div you can also specify your own width to all these elements so if you remove this pull right from here and if I specify one order slash two then this is going to specify 50 weight to the first day you can see this looks based by 50 way to the first day I can do the same for the second as well and for the third element as well you can see this will specify 50 weight to all the elements now let's suppose if I change this to 4 say those changes you can see now I have 50 and 50 with both these divs and 25 weight to the third tip so using this basis class F you can specify basis property to your division tag and now if you want you can change the direction of your Flex using Flex column class so this will just change the direction of your date we have first second and third day you can reverse this flow so you can start with the third tip if I see here hyphen reverse say the changes so this will just reverse the flow of the flexbox and you can do the same thing with row as well so if I say here row take the changes and this will start the div with the third day next comes with some amazing classes two of them are Flex initial and flex one let's suppose if I get rid of this like reverse and like bases right from here and if I specify like none here I'm going to specify Flex initial and I'm going to do the same for this third day I'm going to specify Flex initial see the changes I'm going to have the width of the content to this day now without this Flex initial you can still be able to get the same result right but let me show you the benefit of using this place initial the flex initial class used to allow a black item to shrink but not grow it will have the initial size first so let's suppose that the second day I have width 96 it means if the second div as 24 Ram with save the changes then you will see the result something like this but if I decrease the viewport of this browser you can see I can shrink the second division tag so this division tag will shrink but will not go with this Flex initial you can shrink the element but it will not grow the element the element will have the default initial side now as you know this property is only going to allow the user to shrink the element let's suppose that you want to grow and shrink the element at the same time instead of using this Flex initial you simply specify here Flex 1. changes and now if I increase the viewport you can see this will increase the width of the element and if I decrease the viewport it will decrease the width of the element you can notice you can also use this Flex 1 to specify equal width to all your elements so if I say here Flex one something like this then this is going to specify equal weight to all your divs you can notice now we have equal width to all your divs now let's suppose that you want to shrink your division tag when we reach to the minimum width so let's suppose if I add here Flex none and if I specify here with 96 and here I'm going to specify Flex Auto and width is going to be 40th means 12 Ram save the changes and now when I increase the viewport you are not going to see any result we are going to have the full width to the third element and if I decrease the viewport you will notice here when we have the minimum width to this 30th after that the second div will get shrink otherwise it will not shrink you will notice here it will shrink the second wave once there is no space to shrink for the order elements just like the flags you can also use flex grow class so let's suppose that you want to grow this last dip you just need to specify here graph using grow this will fill all the available space and specify that to this third tip when I say the changes you can notice this will specify the available space to this third day and you can also prevent the element from growing using grow 0 class keep in mind you don't have to specify Flex prefix to the grow class because in Delvin if you want to grow the element you just have to specify row if you want to shrink the element you just have to specify check so this division tag will not grow because we specify here grow zero when I say the changes increase the viewport you can notice this will not grow this is not going to change the value of this second day now we can do the same thing with shrink as well so let's suppose if I specify here a shrink width is going to be 40th says and I'm going to increase the viewport you can see it will not grow but when I decrease the viewport it will only shrink the second element when there is no space available for the other elements to shrink and if you specify here 0 with 96 then you will notice it's not going to shrink when I decrease the viewport you can see the third div is now not going to shrink you can also change the flag element order using order utilities you can use order class to render a flex and a grid item in the different order then they appear in the Dom so let's suppose that you want to display this first div and the last you specify here order last when I say the changes you can see you're going to have your first save at the last and if you want you can specify order to your div as well using order number so let's suppose this page over here order two this is order one and this is order three you'll notice I'm gonna have second div on the first position and then I'm gonna have my first day so using this order you can specify any order to your next item there are different classes over here inside Kelvin CSS you can use any of these classes to specify order to your flag title so let's suppose that if we have here with 96 to all these days let me just get rid of these classes right from here save the changes you'll notice I'm going to have the div something like this and now what I want I'm going to specify here shrink 0. so I don't want to shrink any of the element so I'm going to say here shrink 0 and I'm going to do the same for the third div as well and for this first date and now when I decrease the viewport you will notice now my content is overflowing I'm going to decrease the viewport now my content is Overflow the container if you want to stop this and make your flexbox responsive you can also use your like wrap save the changes and now when the viewport is less than the width of your Flex items you can see this will move your Flex item on the new Pro so this will just make your text box completely responsive now suppose you want to wrap the element or grow the element of certain breakpoint then you can use a Kelvin breakpoint there are different ways to make your flexbox responsive intel map this is not the only way you can make your flexbox responsive you can also use Kelvin breakpoints so let's see a very simple example let me get rid of this Plex wrap right from here and put this pose there I'm going to specify shrink then I'm going to get rid of all the classes and then I'm going to say SM colon likes none and width is going to be 56. so what I'm going to do is after the small devices I'm going to specify Flex none to this division dag otherwise I'm going to specify sharing class to this day just start that right down here I'm going to say this ring then specify a bit 96 and to the third div I'm going to specify LG growth so what I'm going to do is I'm going to grow or you can say take the whole width of the div when the viewport is equal to the large device save the changes when I decrease the viewport this will shrink this second element right and when I increase the viewport and when the viewport is equal to the large devices you can see we're going to have this class to this last name so using this delven breakpoints you can specify any class to your element whenever you want so if you open the television CSS click on get started and click on screens you will find all your breakpoints here and you can create your own breakpoints as well so SM for small size of devices md4 medium size or devices LG or large size of devices and so on so you can use all these breakpoints and specify your own classes to your division tags using television CSS so using this technique you can specify any class to your div and make your clickbox completely sponsor so I hope you understand how to work with plexbox with Kelvin CSS if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one [Music] thank you [Music]

Channel: Daily Tuition

Views: 3,820

Keywords: Tailwind Flexbox in Detail with React App, flexbox, tailwind flex, working with tailwind flexbox, how to create tailwind flexbox, make tailwind flexbox, flex, tailwind flexbox tutorial, how to work with tailwind flexbox, make tailwind tutorial flexbox layout, create tailwind flexbox layout, working with tailwind css flexbox layout

Id: 2b1wwncor6E

Length: 12min 34sec (754 seconds)

Published: Fri Nov 11 2022