Learn Flex-box layout in 15 minutes | CSS Flex Basics tutorial

ladies and gentlemen today we're gonna talk about flexbox layout in 15 minutes so in between jóska topic I'd like to do some CSS topics so today's topic is very important now even bootstrap is using flexbox layout inside so it's very important to learn flexbox if you are a CSS guy so let's check it out and welcome to tech see tutorials flexbox may look harder to learn in the beginning but it's actually focused around only few properties about five or six of them and if you learn them 30 you can just learn the entire thing within a day or so but make sure you need to practice a lot and it will make your life much easier so let's start by creating a list so I'm gonna create I'm gonna create a ul and inside I'm gonna have some Li let's call it 1 2 3 5 and it renders quite ugly as we expect it now before we go to flex let's just fix a few things and then we're gonna apply flex to it and we're gonna look at lots of other options so let's first do ul style so we want to remove this dart so I can say list style type is none so it removes all that stuff and I'm also gonna remove any margin or any padding that it applies by default so now it's although here let's add some border border and let's say 1 pixel solid well let's have dotted red ok so I have a board ok for all the Allies which is inside we can say border is let's say 1 pixel solid black and we can add some margins and padding margin is say 0.5 am and heading is also 0.5 yeah alright so it looks nicely and buy beef by default this is display:block that's why they are piling up like blocks and the rig is hundred percent that's the nature of wall display:block so now let's start our flexbox layout so flexbox layout focuses around two things the container so here our container is UL which holds all the items and these are each items so we have to control everything pretty much everything through container so here we have to add one more property called display and we're gonna call it flex remember display property can have display block inline block inline table similarly you have flex which tells the UL that have all the other item inside this container should behave flex so this allows you to control that element as a flex layout so by default you have things are moving from left to right and they are in exactly the order they're defined by default they are not wrapping let's say something like this as you can see they are not wrapping so that's a natural behavior so direction is left to right there is no wrap and they are in order and also they are behaving like they're in row this is the default for flex so flex you can have two kinds of ways you can display either in a column fashion or in real fashion so by default it's rose so first let's control that so for changing row two column we use flex direction so by right now it's real it's not going to change anything if I do column then it behaves like blocks so let's switch back to row and now there are rows what if I want this over here in a reverse order so one would stick on the right side and then two three and four and five so the completely flipped of you for that I would use reverse reverse and as you can see it completely flips the view the one is a far left similarly if I do column reverse it does the same thing one is at the bottom and five is at the top let's keep it real for now what if I remove this padding's and margins then as you can see there is no margin and padding by default it's all kind of touching each other all the elements and by default it's on the left side now let's introduce it back so it looks a little nicer by default there is no wrap as we looked at it just even if you have more elements than your container then it would go outside so it's not wrapping but you can add a wrapping so as you would imagine the name of the property would be flex wrap so the direction controls the rows and columns wrap controls no wrap or wrap so by default it's no wrap this is the default property but we can add wrap now so well here it won't make much difference because we only have five elements but let's say if I copy paste bunch others it will stop rapping now here as you notice that it's going one two three and then wrapping at the bottom if I want the reverse wrapping we're insert of wrapping at the bottom it should go up I can do wrap Bush and now it actually starts from the bottom and wraps up basically creates another row on the top when it wraps so that's what the wrap reverse does okay let's remove all the other elements so we can see things more clearly okay remember for the rori words fill x-direction the the whole view was flipping where one is touching the right side of it internal web site and it would start from right to left what if I want something like this where five should be touching here and then four and three and two and one so for that there is a property called justify content and there are multiple options so if I do flex start this is the default which means start from the left side if I do end which means move it to the right side but it's not flipping the one is still most left side compared to rap reverse where one is actually touching the right side it's making it right aligned in turn off left line if I want it centered I would simply do Center and it exactly in the center now this used to be very difficult you have to use a position:absolute and all that stuff you have to do all kind of tricks now with the Flex it's easy as just changing one property now what about vertically so right now if I remove the marching and padding's it is exactly in the center horizontally and vertically but it's an illusion vertically if I let's say give the container some height a fixed height which you could have so far let's say 200 pixels it's stretching everything which is a wrong behavior we don't want this what we want is the whole thing nicely centered vertically as well so for that we need to introduce another property called a line items and here we want it also centered now it's actually vertically centered and horizontally centered as well what if I want them all the way at the bottom then I would simply do allowing items flex start which puts at the bottom legs end will put puts in the top and what will we see which is called stretch which stretches the whole thing that's the default but what we want is Center now let's add the margins back so it looks nicer there are times where you want them equally distributed which means the space between should be nicely adjusted so that you don't have to manually put anything and that's the whole purpose of flex is that it's so flexible that you're not saying that ok move it here 20 pixel or 30 pixels just adjust everything as I'm saying I don't really care about exact margins or exact position I just want things to be flexible and nice looking for the justify content insert of center I can use something better so I can say space between space between like Dave Matthews song it's puts to all the space between each element equally so between 1 & 2 & 2 & 3 & 4 & 5 there the spaces are equal if I remove the padding and margins for each Li you can see that one is actually touching the left side and five is touching them the right side but this still looks a little bit ugly what if I and that is because they're touching on the both sides and oftentimes you want them somewhere around here so there's we need some space on the left and right side so we have as you have guest space around and that would add some spaces but if you look at now the space around is little smaller than space between and it's about half so this space between 1 and the left side is about half of the space between 1 & 2 kind of looks nice and if I introduce again the padding is in margins now as you can see it looks really nice if I adjust it it's addressing really nicely but some people prefer space evenly which means even on the left side you want the equal space so in that case you can do this and now everything is even so the space between left and one and one and two and two and three they are all equal now what you use is your preference I prefer space around some people might prefer space evenly so we have about 1 2 3 4 5 properties we can control everything ok so now we haven't done anything with that Li but there are times when you want to do a lot of things with it right now everything that we have is in order now what if I want to flexibly I wonder container one to take certain amount of space than container two so that when you're building a layout you might want to do that and you want it flexible enough to stretch and shrink as you need and keeping that the ratio so how do I do that so the first thing we need to look at is the order right now they are in the order that they are defined but we can change that so for that I'm going to introduce some classes so I'm going to create two classes flex one and I'm gonna say order is one so right now none of these have orders so let's start with adding class equal to flex one so now one has the order and suddenly one goes all the way on the right side and that is because the things between order and unordered on order goes on the left order items go on the right so if you want to order things you want to add order to every element then it only makes sense so let's do that and I'm gonna add some style here so that we can see things better when I say border it's a three pixel dotted let's say red okay so one is here as soon as I introduce class flex one to two it would move here so if two things have the same order then they would order in the order they are defined so one is defined first and two is defined second so that's how they're gonna behave so now let's add class flex one to every element so there's no difference right now except to see the difference we need to change the order so we I'm gonna introduce another class called flex two so this would have different order order - it's almost like a priority order one you have a priority one so it was gonna stay in the on the on the far left in order to follows it so imagine if I change one to order two now one goes on the way to life because everyone else has order one which means they gonna come for so let's have some water here the pixel Datuk blue I'm also gonna add some flex to here so now 1 & 3 are order to and everybody else is ordered 1 so this is how you can order things nonlinearly which was very hard to do before you can imagine using float left and float right this would be almost impossible what about the size right now they all are exactly the same size but I want to change that I want let's say flex want to have different size so for that there's a new property called flex basis and basis means initial size I can give it a percentage let's say give it a 25% so all the elements with flex 1 which is 2 4 & 5 has 25% initial this is quite tricky because things are flexible it will adjust itself because I have margins and padding's and the border is actually 3 pixels so that adds all the but what it's saying right now is that I want to start with 25 of these total width and managed drinks and grows accordingly so right now I have a wrap but if I do let's say no wrap by removing the the Flex wrap then it would stay in one line grow and shrink accordingly initial width would be 25% now what if I do 100% it will still adjust because you can't really do three elements hundred percent right so that's what's happening so instead of using percentage of spaces you can do something else there is a thing called shrink and grow where you can say okay you know I want to start with 20 m and then I want to give it a stretch and shrink ratio so let's say I can say 20 e m so this is how I want to start for each flex one which is 2 4 & 5 or I can do let's say 10 year and then I want to define right now it will be starting to 10 and it would stay there after that so what state what I want to want to do is I want to say I want to stretch once it reaches that and if I am if I stretch my my screen I wanted to grow but at a specific pace so I can provide two arguments first is growth and second is stretch and this is the speed at which it should grow now let's add also the same thing to flex two I can say okay I wanted to grow and shrink double instead of flex spaces I have to call it flex because this holds three stretch shrink and flex spaces so right now they all have the same basis which means it will have all ten pm to begin with and as I shrink flex to would shrink faster because I'm saying shrink twice that's why as you can see it's shrinking faster and it would also grow faster so if it grows it will grow faster than than one so let's say if I have instead of ten if I have five eight each as you can see it's growing faster as well because one and three grows twice and it shrinks twice as well so now 1 and 3 is smaller when it shrinks so 5 p.m. is the initial size and you can define growth and shrink rate here and you can have different grow and shrink and you can see how it will help you in a responsive layouts where it could shrink and grow as you like and you can control now all of this using about 6 or 7 properties but remember if you want to master flex you have to practice you have to use a real application practice and then all you will learn how to use and again I have a whole array of CSS topics that I've covered so far so if you want to check them out I have I'll provide a link here in the corner to the playlist so you can check out I also have interview questions and all sorts of CSS videos and I hope you learned something from this video and if you did please like don't forget or like like subscribe and provide a nice comment and you can help me too translate this video to your native language it's pretty easy and I'll provide the instruction in the details and thank you [Music]

Channel: techsith

Views: 106,829

Rating: 4.9375 out of 5

Keywords: Flex-box layout, flex-box, css flex, css3 flex, Flex tutorial

Id: fqNPSSoMO9Y

Length: 18min 22sec (1102 seconds)

Published: Mon Mar 25 2019