What is Flexbox?

Key Takeaways

hey everyone what's up in today's video we'll want to explore what is flexbox and why the hell you should care about a CSS property as a designer so in a previous video I told you that I think that you can't really be a good designer if you don't understand the format within which you're designing for in how your design is going to be implemented on the web or in any format that you're actually designing for and we've explored some basic web concepts such as you know the web is everything on a web page is a box within a box within a box and some general other web concepts and do they I want to explore flexbox which is a super super powerful tool I guess it's a CSS property but it's a tool it's a tool that I'm in love with I use this all the time I think it's one of the most empowering layout tools of the web and I want to share this with you because a lot of people don't know that it exists if they know they don't understand how to work with it or what it can do for them and why they should understand this as designers so let's go into this presentation a little presentation that I did so basically as I've explained in the previous video everything on a page that you put is basically block elements they are type of boxes within a box so if we have to type elements here there are each a block there inside of another block a div which is the name of a box which is the white box in this case and in general if they are set as a block element which is their default they're going to take up the whole space so the whole width of the page and they're gonna be stacked you know from the top to the bottom so first the first element is going to take the whole width of the page or the container in which it's placed in and then the second one is going to be placed under it and then we can change this type of behavior to say don't take up the whole space instead of block put it in line and that means that the box will only be in the size of the content which is inside of it and so if the word nice is short it's not going to still take up the whole screen it's just going to take up how they the word nice is so those are basic kind of layout concept but still if you want to do complicated stuff and complicated layouts on the web those two properties are not enough and that's one of the reasons that we have a flex for when we have flex we actually define the relationship between the parent the box which contains the two other boxes in this case it can be just one or multiple other boxes and the child the child is what's inside of the box and we can give different properties into how we want those inner child's relates to one another resize and align and stack them so we have a lot of properties in in this case we can tell them hey be vertically centered for example so the both centered horizontally and vertically so this is one example of something that we can do with it or just say you know distribute them justify them to the top and bottom of their container those are just two examples very simple examples of different layouts that we can achieve using those properties which we couldn't do with the basic properties of those elements now you should ask yourself all right why would I care about this what can I actually do with this and the answer is everything so basically any layout that you see on the web basically anything that has two or more objects and sometimes only even one object within some container it's usually spaced out or a-line or positioned with Flex books because it's so powerful so let me give you a few examples so if we want the the two two blocks to split the screen 50/50 and even more if we want the content within them to be centered like I showed you before the only way to do this is by turning them into Flex elements so if we want to have in this example some some kind of a fixed nav bar on the Left which its size is fixed but on the right side we have a container which is fluid the way to do that would be with flax box if we want to have this kind of a layout where there is a fixed vacation bar on top and a fixed footer on the bottom the only way to justify the footer to the bottom of the page is not just you know to add lots of space in the you know where we have the big paragraph because we don't really know where the end of the user screen will be so the only way to justify that to the bottom would be with a flax box so in this case what you see here is actually three boxes the navigation bar is the top the top navigation is the first box the middle container content is the second box then the footer is the third box and they're all wrapped inside of a bigger box which you can't see here but imagine that that's the Flex parent that's structure they ring them and aligning them if you want to have for example which is a super common pricing element and you want them to be vertically centered the way to do that would turn the blue box into a flax box and then vertically align those boxes so any in a way layout which contains a lot of elements and you want some of them to be automatically resized based on the user's screen because the users screen we don't know you know it's always responsive everybody has a different layout so some of the elements should be responsive and fluid while some of them should be fixed the way to do that the way to set those properties like 50 percent or even 500 pixels versus auto the way to set these kind of parameters will be using a flex box now flex box is kind of suck to write because it takes a lot of lines of code because there are so many parameters that for both the parent and the child or if you want to have a child with an override feature that it takes a lot of time to write this and if you know me and if you've walked my channel before then you probably know that I bug web loka's web flee just allows you with a super simple interface to set up all these properties with tools that you already know and recognize as designers which is you know alignment tool or shrink and expand tools so it's very very intuitive and you can get very powerful layouts done we in minutes so you can play around with this actually for free web flow actually created the Flex box game which is a way to learn how to use this tool and understand this concept much better so you can go into flexbox game.com and give this a try just to give you an example of how you know it relates in my life and whites and important for me to understand this so the other day I was at a client's office working with a developer on a website that you know I didn't develop because it was before my time and it wasn't done with love flow and so I was trying to explain to them that I want kind of a hero section and on the bottom of the screen but above the fold so users don't have to scroll I want kind of the line with Lobos it's very very common and because we don't know you know the size of the screen so how will he he know you know to put the logos that below is our no matter what the low is or they are going to be above the fault so I told him he was like I but I don't know how to do this or he just made a fixed-width so sometimes on certain screens you had to scroll to see the logos on some of them you didn't so I told him hey why don't you make kind of a wrapper a container that is fixed for a hundred percent of the users screen and then stead of set it to flexbox so the bottom container the logos is a fixed and the whole hero section is kind of responsive and will take up as much space as left that would be an easy way to do this yeah right I didn't think about this way so as you can see even just communicating this concept of what I want to achieve to a developer is important that you know that this is actually possible and this is how you would solve so I actually solve the development problem for him just conceptually of course I would rather just do it myself but even if I have to communicate it's super important to understand this concept and master them alright I hope you found this useful I know I've been mentioned this a lot it's gonna be the last week that I mentioned this but the lunch of my web flow master class is ending tomorrow so if you want to enjoy this if you want to learn how to control tools like the flax Box super super easily and create amazing layout super super fast check out the link in the description I think it's gonna you're gonna love this alright have an awesome day yeah I'll see you tomorrow [Music]