CSS Flex Box Design | Practical Examples |

Key Takeaways

help - come on guys how all you're doing welcome to your brain you with joy from iTunes in today's one we're gonna talk about about designing and CSS designer not a programming thing I'm just gonna call or talk about actually or explain reflects design so what is flex design actually it's like the main idea behind the Flex design is gonna allow you or allow your container to alter its children or its items size width and height so it can just fit the available space so it shrink it to do not get an overflow and like expenses when there is enough space to expand so if this like seems a bit confusing you can just see the examples I have in here so it's very simple as you can tell we have in here us can tell the harder the hitter and the item1 item2 and the footer so using the regular CSS they can be a little bit challenging to achieve something like this especially when using or what when trying to get the full height in you and the full height for the container and full width as well so with Flex it's very very simple just saying some attributes in you and you are ready to go to get the full width and height and this actually design this much design technique gonna help if either the designers gonna work with complicating or programmers like me who like to program but still they need to use some design for their own application so you can use what's designed very very easily to achieve fast and quick things so let me just walk you through how this actually works so to initiate at the flux design all you need to do is to put the display flaps so when you put the attribute to display to flex your you're good to go flex now is run in your container so when putting display flags that means this is the parent so the element you have assigned to display flex it is the parent and whenever you put a children assign that those are the items of this glass container so you can control it using the other Flex attribute a as you can see on here so we have flex direction probably the column one so you can change this to column or row presents the a scintilla here we have the hitter then another container so the hitter and this one the item1 item2 are inside and in a container so header is a container by itself the other one or the two items are inside another container then we get the future container so we using a condom so getting them vertically near the header the other container and the frigate if we change this to grow and make sure like we are in the floods parents and the Flex parents we are assigning it to the hall or to the main routes to the main parent in a film in flux parents let me have the header then we have the container in here which what I was talking about where it takes the item 1 and item 2 and probably the future at the end so to achieve something like this that one we are going we need actually to use another another container and sound of parents and put the children inside this so not gonna help us to achieve the full height and the full width of the page so let me go back in you and let me show you we have put in the row as you can tell it's change it to horizontally solve the row works by setting the item to the horizontal thing and the vertically or actually the column set them to take the vertical layout and we hope also we have like well reverse so we put row reverse and you get the reverse thing so as you can tell we have the future of the start the item one the item you know not gonna be immutable so now I'm gonna change and the header at the end so you're just gonna reverse all the elements start from the end to the beginning so you can use that as well also on the column you can use column that you reverse to reverse everything in here so it works the same actually and let me just come over back in you and we have this so for also the justified contents gonna tell MIT just just use the flat start so start from the start of the page you can use flux Center to start going center page you can stand use flux end to stop from the end of the page and so on and so forth also for the line items and what contents you can use a stretch to trace the whole pages can tell in here or you can use the other attribute to only take portion of the page so assume I tell I can't explain everything in here so you can just check that Google for the reference for that and you can just manipulate that to understand how actually works so we can just focus on the brief things or on the necessary things in here so for also for the Flex container horizontal this can tell we also set the display box for here Y so we can use this item one and item them to position them on the page and let them take the whole height and whole width over here so you know we much more easier when this how we can allow us to do this and you really really nice trick and all you need to do is just put the display flags manage or put another attribute and you're ready to go so to actually explain this how it works let me just walk you or take you to the orbital pendant here set up a skin cell we have three children's in here and they're taking the whole height of this page you'll have tried one child to try three and the child 4 so we might be noticed but the child to is taking more space than the other children's so why is that happening we're doing the same as the velocity so we are putting the Flex pair engineer so change the world for with an eye the full page and also change the display of flex and the Flex direction of reverse rub so this is not taking effects anyway so let me just remove it for example or for a second and we've taken also the container in order to also take the whole height in here is just assigning it to display flex and a flight direction of throw so you can tell we are using Roman here change it to column will change to column respectively no problem so maybe put it back to row and also we have the Flex item and the flux oxygen what it takes actually it's displayed two flags so we set each item in year a house like it Flags display and the Flex one and the Flex one tell it to take a flex grow of one so the growing of this the time I Germany is taking one while the other flex - garage two is taking plugs two so if you're familiar with aspect ratio this is how it actually works this taken an aspect ratio of 2 of 2 and this one of 1 so 2 of 2 is greater than 1 of months so this child 2 is taking more space since we are assigning the flux gratitude to the child - but why taking more space so as much as we increase this the space it takes it does increase as well so you can see child 2 in here and also for the child 3 since we are using also flex probe to prevent the Flex - grow - or flexible girl 1 for the class so us can tell we can like manipulate how much space it can take using the Flex attribute in it so we can put it like flex 1 or flex 2 or whatever remember we need in order to make this works and a normal thing is so let's going to tell or as as you can notice we have the child 3 has like more text than this so the child - just the text can be enough for this container all the child 3 cannot be enough so we just not gonna overflow to the child 4 or any other container what you're just gonna return this to line and gonna just keep putting text and like in line in here so you're not gonna overflow it just gonna shrink the text to fit the available space and this is really cool effect and also very very responsive so if we try now to like resize the window as you can see we get no overflowing at all so all of them takes their part of the space of the webpage of all of the available space in here and without problems without overflowing problems and this is how actually they work with responsive design so if you really intend to make your website looks responsive I really recommend going ahead using flaps and flunks isn't that bad think about it just really very easy to use a very very simple to get started with and also to manipulate a deal so just with a simple or like a cup of attribute in here and you're ready to go to make your containers with you so as you can see this is how we work we also can use the row flux or the road - Virginia to reverse the whole children's as can sell we have the child why now this the end in the child war or the child of a fourth child comes on the on the beginning so we can manipulate this Howard data how it does kind of like looks like and also the other one is justified justify touch content and this can help us to put them in the center for example so we can put all of our symbols in the center or you can use like a line item so justify contents gonna work only for the column and for the align items or since you are using rubbing here so we can be used align - items in order to make this works as you can see we have all of them combined into the center not anymore taking the whole page but online under center so we can also put the facts and I want to make them take or go to the end of the page this how it takes effects actually also if like start only to take the soft thing and so on and so forth so you can manipulate your containers put them or position them on every or any position on your webpage and you can manipulate them however you want and they can actually be be very responsive as you can tell and here it takes the whole width changes the web and alter its childers space in order all its size in order to fit the available space so now once it's actually for the Flex design if you really intend to learn more about it and work with it I recommend going ahead and just starting with that you can find the köppen in here so just give them to the köppen try to manipulate some attribute in here in order to like point with with values and your chain flex start to flex animals to see how things gonna change when you change something on your code and so on and so forth and try to create something like an astonishing container position some kind of continuous on the the page respectively in here like the random positions you know what you know how this this actually gonna work so what was it actually guys very simple tutorial a very basic thing and force is designed so if I just couldn't like me if you understand that or I'm not that good and explaining design things I will be very solid about that so if you have anything make sure to put in comment below I'll be very very happy to learn or to help you why not so that was it actually guys I will catch you in the next video tutorial