CSS Flexbox Tutorial for Beginners | Basics & Container | 1/2

hello and welcome back to the serious in this in the next video we will have a look at flexbox flexbox stands for flexible box layout module not the best name maybe but flex box is really awesome because flex box allows us to display our elements on our website more dynamically or more flexible and this is really important especially nowadays when we have all these different devices which we want to use to access our websites like laptops tablets smartphones and so on and because of that we need a responsive website and this is what we can do with flex box so let's have a look at that in this and the next video so as I said flexbox is awesome but first we have to understand some theory behind it so how it actually works and it all starts right here with a specific property because what you want to do is you want to add the way an element is displayed and what you do then is while you add the property names display to this element so far so clear and we had different values for that this could be block or inline now if you don't add block or inline but this one right here flex then you change this behavior of this element basically because you turn the element you added this declaration to into this you turn this element into a parent or into a Flex container well a Nesta name says a container normally contains something in this something are the children or the so called flex items and that's the important core concept of flex box that you have to understand because you always add display flags to your parent element or kind of the wrapping element and by that you turn this parent or as I said this wrapping element into the Flex container and inside this container you then have all these different flex items so the Flex items are basically nested elements into this or inside of this parent element so that's important to keep in mind now as soon as we get this we can add more properties to our Flex container this could be flex flow justify content align content or align items we can of course also add more properties to our Flex items this properties can be order flex or align self and now at this point it's probably confusing therefore let's forget about that for a second so about these properties for the Flex items and talked about these in the next video and in this video we will just focus onto the Flex container so how it works how we can create it and what happens if we add all these different properties and with that we got the basic theory set and this means we cannot jump straight into the code of our example page and see how this all works so let's have a quick look at the code which you can of course as always find down there in every description or a link to the code and what we can see in the HTML file is basically this div with the class parent this will become our Flex container you remember back what we saw on the slide a few seconds ago and inside this div we have six other divs this will become our Flex items we also saw that before but we'll talk about the details regarding the different Flex items in the next video in this video we will only focus onto the properties that we can add to this parent class right here so talking about properties let's go to our CSS file right here and here you can see I just added some basic styling to HTML and body and here I indicate that we start with Flex box and actually we will only work right here in our parent so this will be the only rule or rule set we will work with now in this video and down here you can see the styling for the different divs important as you can see for the one I didn't add any height or width to it for the second if I edit a width of 450 pixels and a font size you will see later why this is important at least for what we want to show right here then you can see in the furtive that I added a height of 150 so here would here the height in the for edit width and height so both and the five and six only has a width of 200 pixels so that's our basic setup we will work roof but as I said the focus will be right here in our parent or on our parent now what does look like on the website well it looks like this basically here we have our six stiffs and as you can see the content of the div always indicates the height and width property that was applied who so that's the basic setup I think now it's time to go back to our code and have a look at flexbox finally so in the code we will add this play flex right here to our parent element and that's really important although I'm repeating myself but I want to make sure that you really see how this works this is now becoming our flex container and all these this right here which are nested inside this element you can see it right here we have the Deaf class parent st well parent then and inside this parent we have all these divs so flex items flex container keep that in mind however we are back right here and we need to save this now so we just added display flex right there and if we go back and now reload the page well you can see something really interesting right because all our divs which were still are actually block level elements are now displayed in one single row that's really interesting what is even more interesting is that if I decrease the size you can see that the width of the elements decreases as far as possible and as far as possible means up until the point where the content basically needs the space you can see it right here and right there if I increase our side you can see that all the elements are increasing up to the point where they reach their defined maximum if we inspect that we can see that now this box has a width of 200 same is true for here here we have 150 here we have still the initial value so only the value or the width the content needs here we have 150 and here we have the same thing just a word that the actual content needs and also important our parents are a div with the class parent is also behaving like a block level element so it increases and decreases the size depending on our website with so that's what happens basically when we use display flags there is more that's happening right here but we'll have a look at that step by step throughout this video so let's go back to the code now and change this value from display flags to display inline flags right here if we save that and go back and reload the page we can immediately see what happens to our parent our parent now behaves like an inline element this means it doesn't occupy the entire space anymore let me maybe unselect the inspect tool here it only needs the space that is required to display the content just a normal inland element behavior basically more interesting also is that if I decrease the size now you can see that our elements are not decreasing the width they just keep their width and if I decrease the size more well you can see that all our elements are basically hidden so this is what happens if I use the inline flex value for our display property now I don't think that's what we want so let's change it back to flex right here like that and save it so if we go back now we can see that it behaves like we had it before this is nice but that's of course not everything we can do with flexbox because with that we now just defined that this should be our Flex container but of course now we have lots of possibilities how to change the way these flex items behave and to see that we will add another property and this property is called flex flow like that and these standard values because we will need two values for the Flex flow our row and no rap this one right here now why am i adding two values here well the reason is simple this flex flow property combines two separate properties which you could also use but I like to use this combined flex flow property and which properties are these actually well let me comment this maybe right here Rho simply refers to the Flex Direction property and no rep so the second value refers to flex rep well kind of intuitive actually like that as I said you can also write these two properties separately but I'll stick to flex flow because I think it's easier to use however if we save that and go back and reload our page we can see that the behavior is exactly the way it was before because as I said this is the standard value or these are the standard values however let's change that now and let me start with the second value with no rep so let's change the Flex rep property because if we have no rep right here well we can also have rap of course if we save that and go back then we'll see something interesting because if you look the page you can see well nothing happens that's not really interesting but if I now decrease the size of the page can you see it now our elements will wrap as the name says and what does rep mean here well it basically simply wraps as soon as we reached a point where it would have to reduce the width of our items as you can see it keeps the 200 width of our width 200 pixels items down there if I wrap that further you can see that it keeps that width and then comes finally the point where it decreases the size of these elements as you can see it cannot decrease that size right here because the content simply occupies that space but that's basically how Rev works and there is also another important thing that you might see already and we'll talk about that in a few seconds you can also see that if you look at the last two elements you can see that now the height of this element decreased significantly because right here we have a height of 150 pixels although we didn't define any height but for this element now when it's wrapped it only has the height of 18 point 5 pixels so the value it needs to display the content and that's also something really interesting but this is also something that we can change as I said we'll talk about that in a few seconds the main thing that changed now is that adding wrap as a value for the Flex wrap property allows us to well let our items wrap we also have another option right here we can also use you can see it already wrap reverse if we use that and go back and reload the page like this we can see that if we now decrease the size it wraps well reverse as the name says now our two elements right here are on top and if one right here is at the bottom almost something you can use just by simply changing the value that we have right here however I will stick to wrap because I think that's the more intuitive and maybe normal way that you would expect to happen to your elements if you want to wrap it however we also have this one flex direction so this value right there and the standard value is Rho but as you can imagine you could also change that to column right here if we save that and go back to our page and reload it mu then we see actually a lot of interesting things because the main thing of course is that now it is displayed as a column again or the elements are displayed in a column again and this is more the behavior we know from the normal block level elements and if I decrease the width you can see it behaves just like we saw it before but right here the elements don't become smaller than the width that we defined so basically not only the widest display changed but also the behavior changed not it's interesting and also something we'll have a look at in the next minutes but there is more things we can change right here if we go back and change it from column to row reverse for example and save that and go back and reload the page we can now see that if we increase our page we have the same behavior we saw in the beginning referral but now from a reverse perspective so that's also possible and as you can see if we decrease the size you can see that our elements decrease until they reach the minimum width they need for the content let's increase that or let's maybe keep it like that this and let's not change it to as you can imagine column reverse like that and let's go back and reload the page and as you can see now it is displayed differently again now we see the phone right here and the elements are basically aligned to the left here and if I decrease the size you can see that again the width of the element stays the way it was defined initially now this can be really confusing so this whole row column reverse column reverse roofing and there is also a really important aspect included into that that you have to understand to make sure that you can use flexbox and because of that it's now time to go back to theory again to understand what actually happened here because the main thing you have to understand right here is nine X's versus cross X's now it gets even more confusing but let's have a look at it step by step so first we have this thing right here this is basically our website or to be more precise this is our flex container now what we did we added flex direction you remember flex flow the first value this is the Flex Direction property now we add the value of Rho in the beginning this was the default value that we had what does this mean for our container for our Flex container well this basically means that the main axis goes from the top left corner to the right as indicated by the arrow that's the main axis just keep that in mind and if we have a main axis then we also have a cross axis and the cross axis starts at the same position as the main axis but still goes downwards of course so that's the basic setup we saw in the beginning now we can also change that because we saw that we didn't only have Rho we also had Rho reverse now what does this mean well Rho reverse simply means this right here our main axis now starts in the right top corner because if the normal row is from left to right from the top left to the top right then Rho reverse well this should be from the top right to the top left corner of our containing of our Flex container so this is the main axis then and this is the cross axis so this is what happens between Rho and Rho reverse let's go back to the code and try this out once again to make sure we understand that so back in the code now we will add row once again like this go back and increase the size maybe like this and reload the page so we know that we now set our Flex flow to row and so D main axis starts right here in the top left corner and goes from left to right across axis then goes from top to bottom you cannot see it right here but that's just what it is now if we change it if you go back and change it to row reverse save that and go back again you can see that now if one starts right here in the right top corner so it goes from left sorry from right to left right here and the cross X's goes down here and if you don't believe me with the cross axis we can simply decrease the size or the width fear as you can see it like that and as you can see the elements start right here and they are all aligned to the right basically so to the cross axis if we go back and change it back to row right here oops sorry without the e and go back again and reload the page now everything is aligned right here to the left basically because now our cross axis starts in the top left corner so that's the first thing that's row versus row reverse let's increase the size let's maybe keep it like that because if we now go back to our slide and now have a look at two more examples and the first one is this right here we have 2 flex direction of column now can you imagine what happens then to our to access that we have I hope you can maybe you can't no problem because what happens now is that our main axis now goes from the top left corner to the bottom so not anymore from the top left corner to the right because we changed the way or we change our two axes with that column value and if the main axis goes from top left to bottom then the cross axis has to go from the top left to the right now if we continue that and think about that from one last perspective this would be flex direction column reverse can you imagine now what happens well maybe you can because what simply happens now is that column reverse simply goes from the bottom left corner because remember with column we started in the top left corner and went to the bottom left corner and column reverse then well this means that across axis has to start in the bottom left corner and go up to the top left corner again and this also means that our starting point for this two axis is now the bottom left corner and therefore the cross axis will also start there so this is basically what you have to keep in mind and the easiest thing to remember that is actually that the starting point so the initial starting point for the standard value which is Rho is the top left corner of your Flex container so if you add a value of Rho you start right there with the main axis going from left to right if you take Rho reverse you still stay in the top corner but then you start reverse so you start in the right top corner if you define column as a value well the starting point is still the top-left corner but now your main axis doesn't go to the right but it goes down and finally if you have a value of column reverse well then your starting point initially is the top left corner but as you have reverse you just have to go down to the bottom left corner and then go up again to define the main axis so then the bottom left corner is your starting point so as I said try to keep that schema in mind because it helps you a lot to understand how flexbox actually works and if you now go back to our code and now change Row two column like that go back and reload the page you can see that our items now behave differently and if we change it to column reverse right here like that then you can see that it starts in the bottom left corner as I show you and goes up to the top so that's basically this core concept behind the Flex direction and this is really important because the direction or the position of the main and cross axis has a lot of impact or consequences for other properties that we can use for example if we have a look at our website again and change it back to column right here that we load that you can see that basically the width the maximum width right simply answered 150 150 200 200 we sought it already but if I change it now to row to row right there and reload the page and increase the size you can see that the height of all our elements is kind of well stretched to fit the entire Flex container and this behavior can be changed of course and to understand this behavior we need more properties and we need to understand what we just saw about the main axis and the cross axis so let's have a look at these properties now because the properties we can add or will add are the following ones it's a line items and it's justify content so two more properties now what does this mean what are these properties doing let's have a look at it in an example because this tenet value for online items is this one stretch so if we save that and go back and we load the page we can see that nothing is happening but if I go back now and change stretch to Center save that go back then you can see something interesting because right now the height of these elements is just the height that is required to display the content so it's not well s devalue said stretched to the maximum anymore so aligned items seems to have an impact on to the height of our elements and I must say that this is totally wrong so don't remember that I just said that because this is what you could see right here because if I simply change now our Flex flow from row 2 column oops right here to column and reload the page can you see what happens it's not the impact on to the height as you might have thought it now is an impact on to the way our elements at this plate on our website regarding the position and in this case it's the center position and why is it then not referring to the height as I just said would be wrong because a line items only refers to the position of our items relating to the cross axis you remember the cross axis now goes from left to right because we defined a flex direction of column so this means our main axis goes down here and the cross axis goes right here from left to right and we defined a value for aligned items so you can remember that as aligned items along of the cross axis of sender this means if I now change that value to flex start for example and save that go back right here then it's aligned to the right because you remember our starting point is right here in the top left corner we have the main axis going down right there but that doesn't have an impact for online items and we have our cross axis starting right here so this is the starting point and flex start simply means okay position the items right here at the beginning of our cross axis mainly now if we go back and change flex flow from column to row once again and save that and reload the page then the behavior changes again because now our main axis starts right here from here to here from left to right and our cross axis goes from top to bottom right there and this means the cross axis starts right here so the starting point is right there at this part this means if I change aligned items back again to Center like that and save it then we are centered because again starting point of the cross axis and point of the cross axis center of the cross axis this is basically what a line items do so keep in mind a line items refers to the cross axis that's really important now you might say okay I got there I understand that the position of the cross axis changes depending on the flex direction and that we can change the behavior of the items in relation or in direction of the cross axis with aligned items but what about the main axis then good question actually and the main axis can of course also be changed or the behavior of the items in relation to the main axis and this can be done with justify content right here because if we now add justified content Center for example right here and save that go back we can see that our items are now centered if you can see that more maybe are now centered along the main axis again keep in mind flex Direction is row main axis goes from left to right and justified content refers to the positioning of the items along our main axis so if I now change Center to flex star or flex end maybe would be smarter I think like that and if we go back and reload the page you can see that now our items I can increase it anymore sorry but you can now see that our items are now positioned at the end of our main axis and if we now add another thing if you know add a height for our Flex container of I don't know maybe 600 pixels like that and reload the page maybe that's that's too big I'm sorry let's make 500 maybe I think that we can see better yeah then you can see it better maybe because if I decrease the size so let's keep it like that and if I now write Flex start right here for a line items and go back you can see that now aligned items so the positioning along the cross axis so here to here is start at the beginning anti position of our items in relation to the main axis so left to right in our case is now flex and this is defined by justified content you can see it ends right here we have a gap in the beginning and justify content just says that now if we set both to Center works again like this and like that then we can see that the entire content is basically centered and looks like that so this is what it basically looks like and I know that this can be kind of abstract in the beginning therefore let's have a quick look at a slide that summarizes kind of what we saw right here in this practical example because basically what happened now of what we talked about now is the following we have the Flex direction of rosette for example this means we have our website and on our website we have the main access starting in the top left corner we talked about that anti cross axis also starting in the top left corner but going from top to bottom we saw that and we know that already what happens now with justified content and the line items is the following with justified content we define the position of the elements along our main axis in this case and if this defines the main axis well aligned items simply defines the position along the cross axis this is what we just saw in this example now if we think back about that from the Flex Direction column perspective it slightly changes because our website looks like that and we now have the cross axis going from left to right that's a difference you remember because now we have the Flex direction column defined and this means the main axis goes from top to bottom and this also has an impact on to our illini 'tom and onto our justified content property because aligned items now refers to the cross axis but from left to right so how these items are positioned there and justify content refers to the main axis again but now this is referring from the top and bottom positioning basically right there so maybe also keep that in mind whenever you're confused what happens now regarding aligned items or justified content and this is actually it regarding these two properties now you might ask yourself okay I understood these properties but which values can I apply right here how can I play around with these different values and a good source for that is as quite often actually mdn the Mozilla developer Network if you look right here on to this page you can find a link to it down there in the video description also so if you scroll down a bit you can find some general information about flexbox right here but if you scroll down you can find all the different properties you have right here and in our case we used a line items for example and if you click onto that you can see all the different values you can use for align items now as you can imagine these are too much values to have a look at them throughout this video therefore you can just play around with them now because you have the theoretical background and there are also interesting ones for example baseline let's maybe try this one out quickly because if we add baseline right here as a value and save that and go back and reload the page you can see that now I hope it becomes clear right here that the items are now aligned based on their content so as you can see this is one line this is for example what baseline is doing maybe not the result you want to have right here I just wanted to show you that and how this works now we are almost done with the properties or with the core properties that we can use for our Flex container but there is one more interesting thing that I would like to show you and this thing is called align content now you might say okay we got a line items we got a line you got justified content what is that now well let's maybe start with our center value again because we know that already if we save that and go back well we can see that it's centers now but this is nothing to do with this new value let me maybe undo it and save it as you can see this is not related to that but if I add Center once again like that and reload the page and if I decrease the size of our website you can already see what happens because with align content we can define what happens with extra space that we have in relation to our cross access so from top to bottom if I go back right here and delete that save it you can see that it is displayed like that so we need more space by adding Center we say well as the name says just Center my items right here so it uses just the space right here and if I now changed it for example to a value like space between like this for example and go back and reload the page you can see that well as the name says there is a space between the first line and the second line really important for the property it only works if you have more than one line because if I increase the size now like this you can see that it basically doesn't have any effect right here on to the way our elements are displayed for example if I use flex start right here to show you that and save it and go back and reload the page you can see nothing changes but if I decrease the size you can see that our items are now displayed while at the beginning of our cross access right here and this is it actually this is the first part of our flexbox video series here I know that this can be quite confusing in the beginning but if you keep in mind what you can do with flex direction so basically change the starting point of your Flex container and bite at the starting point and the direction of your main axis and off your cross axis and if you then keep in mind what happens to align items so aligned items always refers to the positioning of your Flex items along the cross axis I cannot say like this like that because it depends but you know what I mean it's always related to the cross axis then you have justified content which always refers to the positioning of your items along the main axis and then you have align content which always refers to the cross axis but only in cases where you have items in more than one line so I hope with these examples and with this background knowledge you are not ready to start with Flex box and maybe use the code you can find right here as I said attach the video or the link is attached to the video to play around and to practice that also used to MDN and play around with the different values you can apply to your properties because in the end flexbox is really awesome it's really helpful and actually quite intuitive to use if you got the basic concept however this was just part one as I said because we now only applied properties to our Flex container but inside the Flex container we have all these different items and so far everything we changed affected all of the items but what if you want to be more precise what if you want to make sure that specific items inside your Flex container behave the way you want well then you also need to apply some properties to these items and we'll have a look at that in the next video of the series so I hope to see you there and as always I can only say thanks a lot for watching hope to see you in the next video and bye

Channel: Academind

Views: 151,576

Keywords: flexbox, container, flex container, parent, tutorial, css flexbox, css flexbox tutorial, flexbox tutorial, css tutorial, flexbox course

Id: siKKg8Y_tQY

Length: 35min 15sec (2115 seconds)

Published: Mon Dec 11 2017