CSS Flexbox Course

hey there in this lecture you're going to learn how to create your very first flexbox layout using the example you can see in the page here I've already added a little bit of styling in the basic CSS file though this has nothing to do with the Flex box itself here in the index.html you can see the markup for the example it contains a name element with the class of container and inside of that container we have three divs which are in the Flex items as you might guess we're going to create a navbar here as this displays whole search and logout now the first thing you need to understand is the concept of a container and its items that's always how you build up your flexbox layout they don't have to be divs or navs could have been UL element and this could be a list element or whatever you want as long as they are directed children of the flexbox container they turn into flex items so let's turn this example here into a flexbox layout i'm gonna head over to the index dot CSS and i've already given the container a border which you can see around the example here but as we haven't done anything else with this layout these divs will now just stack themselves on top of each other so to turn this into a flexbox layout simply give the container a missplay um flex as you can see but automatically lines up the elements horizontally as opposed to vertically as it was before so by default flex box will distribute the items going from left to right and as you also can see the flexbox container is by default a block element as it takes up all available space in the width except for the little margin i've added to the left and right hand side okay so that was a very quick introduction to flex box in the next lecture i'm going to teach you about the concept of access as that is core in order to understand flex box properly so I'll see you there heyyyyyy in this lecture I'm going to teach you about access as that is a core concept you need to understand in order to work properly with the flexbox because a flexbox container always has a direction by default this direction is horizontal because that's how it lays out its items starting here on the left hand side and going towards the right hand side what we then say is that our main axis goes from left to right along the row and we also have a cross axis which goes from top to bottom now the reason you need to understand this is that we're using different CSS properties in order to position our content along the main axis which goes horizontally in this case and the cross axis which goes vertically in this case however that's not always the case as we can also flip the direction of the flexbox container let's do that we'll head over to the container and give it a reflects direction by default this one is set to row so if we write row nothing will happen however if we change this to column now as you can see not results in stacking the items from top to bottom going downwards instead of going from left to right and now the main axis actually goes from top to bottom and the cross axis goes from left to right now we're going to flip this back to row as I found that I've used the default direction much more often than the column direction when building websites so I won't focus on that in this course as I wanted to be as practical as possible but I want you to be aware that the main axis is horizontal because the Flex Direction is set to roam however it can be vertical as well okay in the next lecture I'm going to teach you how to position items along the main axis so stay tuned and I'll see you there hey there in this lecture I'm going to teach you how to position the items along the main axis which goes as you hopefully remember from left to right and that's because we probably don't want all of our items to be squeezed together over here at the left hand side because we might for example want a little bit of spacing in between them or maybe move the log out item over to the right hand side so let's jump into the code and see how we can achieve this we're going to use the property called justify confident as that's the one which controls the content along the main axis justify content can take a range of different values and actually want to paste in a few of them here for you to experiment with towards the end of this lecture by default justify content is set to flex start meaning that the content is squeezed together at the start of the main axis which is the left hand side if we change it to flex end and as you can see the content will move over to the end of the main axis on the right hand side we can also use Center and that will of course send correct now it also has a few other nice properties which start with space let's try this space round this value will give each item an equal amount of space on its left hand side and right hand side because as you can see when two items are besides each other the space is twice as wide as if as if it's only an item and then the start of the container or the end of the container because this space here is twice as wide as this space here and this space here so what I want you to do now is try out these last two values for yourself space between and space evenly so pause the screencast and change this value here to these two and observe how the items are laid out in the main direction and try to understand how these three space between space evenly and space around differ from each other once you've done that just resume back to the screencast and then we'll continue with the course okay so hopefully you have been doing a little bit of experimentations you have any questions feel free to ask them in the Q&A section and in the next lecture you're going to learn even more about how to position items along the main axis so I'll see you there hey in this lecture I'm going to explain how you can adjust the position of single items along the main axis using the good old technique of margin Auto because these various justify content values are nice and handy but they don't always do what you want them to do for example I might not want to have the items spread around the container like this perhaps I want the home and search over on the left-hand side and the logout over on the right-hand side and that's not something you can do with any of the justify content values alone so let's actually remove justify content so that they're all squeezed together on the left hand side as that's the default layout now I don't do is move the logout item over to the right-hand side and as that forces us to target that item itself I've given all three items class names home search and logout so to change the logout item will simply target it and give it a margin on the left hand side and set that through Auto run as you can see that pushes the logout item all the way over to the right-hand side and this space here now is the margin left of the logout item so this is normally how I assume single items along the main axis if we wanted to have both the logout and the search item over on the right hand side we could simply target the search item instead so if I remove it from logout it will be placed in the default layout and then I'll simply give the search margin on the left side instead and as the search is before the logout in the mark-up it'll push the log out as well to the right-hand side when it adds a margin to its own left-hand side now I want to give you a little task first I'm going to remove this one here and I'm going to set me let's defy confidence to me flex and it pushing all the items over to the right-hand side what I want you to do now is to make the home item rather appear here on the left-hand side I want you to do it by adding a margin to the Oh Michael go ahead and do that then just resume and come back to the screencast when you've managed to do it and then I will show you the solution as well okay so hopefully you pause the screencast and write that out what you need to do is to give this home item margin on its right-hand side so we'll do margin right in set that to auto and boom rad purchase the home item from this space here to this space here and this is now the margin okay now is it for this lecture in the next one you're going to learn a really cool property called flex which allows you to have responsive with on the items themselves so I'll see you there Hey in this lecture you're going to learn about the Flex property which allows you to set the width of the items according to the width of the entire container meaning that they will become responsive that's unlike our current items which stay the same regardless of the width of the container so if we want all of these items to stretch across the entire container and grow and shrink with it we'll simply convict the items with that container select all the direct children would also our dims and then give them a flex property of one as you can see they now take up an equal amount of space 1/3 each and they grow and shrink with the size of the container now there's a little bit of magic here as flix is actually a shorthand for three other properties rayar flex grow flex shrink reflects races however I don't dwell about this now because I think there are other parts of flexbox that are more important to learn before you jump into understanding these three so we'll start by using flex the easy way and then in a later screencast I'll explain these three in depth but for now I'll just keep them here to remind you that this is a short app now setting flex to one is much better than the old way of doing it where it'll probably set me with to a percent finish like this Apple it works cover now you have to change this number whenever you wanted to add a new item in the container whereas with Flex you can simply add as many items as you want and flexbox will take care of doing the maths for you and making all of them responsive so let's actually try that out Oh turn on the Flex again and let's simply add a fourth item here we'll call it profile let's run the code as you see Lex automatically allocates space for all of the items according to how we've specified it here now each of them take a 25% of the width and they grow and shrink with the container we can also target specific items let's say that for example we want the search item here to be twice as wide as the rest of the items then we'll simply do container search and set Flex to queue that's you can see it's now twice as wide as the three other items the reason I'm specifying container and then the child that container which are the class of syrups is because doing just dot search wouldn't work as this selector here is more specific than this one and that's how CSS worked works if this one is more specific given that has both a class name and tag name its styling will reprioritized above the less specific styling added hair that's only using just a class name so let's use both dot container and the child of the container that's the class of search so that was just a little digression about CSS selectors so while this example here is nice for learning I can't say that I very often use this way of creating layouts where all of the items are well and then some of them are 2 or 3 or whatever what I found to be a more realistic use case is to have one of the items doing all the flexing while the others stay at a fixed width and we can achieve that by simply removing the Flex one on all the items except the search now as you can see the home logout and profile have a fixed width while the search item growing and shrinking with a width of the container and now we can also remove the specification here and just use dot search ok now I want to give you a little task and before that I'm going to remove this profile item so that we only have three now as you can see the search in the middle that's all the flexing while the home and logout are fixed with what I want you to do now is to make this layout do the exact opposite meaning that the search item will have a fixed width while the home and the logout will grow as you widen the contain so pause the screencast and do that and when you come back I'm going to show you how I would do it okay so hopefully you pause the screencast and did the task now I'm gonna show you how I would do it so I'll start by making the search item fixed with again to do that we can just remove this young here now it's fixed will and rather give this value to the home icon now that is doing all the flexing and what I also won't do now is to change this to one because when this is the only item doing the flexing it doesn't matter if this is one or two or hundred or a thousand or whatever you want and therefore I think it is to just have less fun now we also have to give the same behavior to the logout pick'em so I'll simply log out and just the stack we have earthly home and the logout item growing and shrinking while the search as a fixed-width now I really don't know why you would create a layout like this but this is at least how you would do it and that is it for this lecture I'll see you in the next one hey now that you know quite a bit about how to control the items along the main axis using stuff like justify content margins and flex oona teach you how to control the content along the cross axis which in our case goes from top to bottom and by default the items stretch themselves across the cross axis to make this a little bit more apparent let's set the height of the container here to 100% now as you can see they stretch across the axis going from top to bottom regardless of how tall it is now a quick note on this height 100% this only works because we've set the height of the HTML and the body to 100% if we hadn't done that then the height of the HTML and the body would just be whatever the container forces it to be meaning whatever height the container needs in order to display its content and thereby setting the height to 100% wouldn't have any effect at all just remove it doesn't do anything so this is a nice technique for having the container responsive in the height as well setting the HTML on the body to 100% and the container as well okay so by default a line items is set to stretch so misalign items here is the property that controls the items in the cross axis if we change it to for example a flex start as you can see then they're pushed all the way to the top the start of the cross axis and they only take up as much space in the height as they need in order to display their content we can also do flex and I'll push them downwards to the end of the axis and of course you can also do center that'll Center it o as a little side note air on a point out that flex box is great for centering an item inside of a container for example let's say that we only had one item here it could be the button with the X inside of it like this for example and we could easily Center this inside of the container using a line items and combining it with justify content and doing Center there so now as you can see the button is centered no matter how you changed the container so that's nice little trick which I found often comes in handy when building various layouts okay so let's change this back again and remove this one because finally I'm going to show you how to align a single item at a time let's for example target the logout item we then do a line self it's at that for example to flex start right push just that item to the top of the axis now what I want you to do is to make this home item appear all the way at the bottom here so go ahead and pause the screencast jump into the code and make it happen when you've done it come back and I'll show you how to do it to swallow okay so hopefully you managed to do that let's look at how I would going to first target me oh Michael and we're going to give it a line self insert that reflects and that's the end of the cross axis is all the way here at the bottom and now we have this really weird layout the kind of a diagonal navbar which also works responsibly and a very weird way so I have no idea how you want layout like this you've at least learned how to do it using align self and align items and that was it I'll see you in the next screencast hey in this lecture we're going to talk about flex direction column because up until now views the default way of laying out items which is flex direction row meaning that the Flex container lays out items along the row going from left to right so now let's try flex direction column as you can see that changes the container so that it lays out the items going from top to bottom and this again means that justify content no longer controls how the items are stacked across the horizontal line but rather how they're stacked across the vertical line and that's because the main axis now is vertical going from top to bottom and not horizontal going from left to right which it was when we had flex direction row like that okay so let's try an ad justify confident and set it you for example flex and that doesn't result in any change actually so why is that well it's because the height of the container is not set explicitly it's just as tall as the content inside of it forces it to be meaning that has no extra space when it's trying to push all the content towards the Flex end which is the bottom of the container what we have to do is explicitly set the height of the container to 100% and very can see now the container takes up the entire window or almost at least and the justify content touches all the content down to the bottom of the main axis now just as a reminder when using this height 100% you also have to set the height of the HTML and the body to 100% here okay if we change the Flex and the two flex start all the content would s be on top here that's also the default way of doing it as you can see we can also do Center and that will Center it okay let's now look at alliant items which controls the layout in the cross axis which now is horizontal going from left to right if we want to shove the items over to the right hand side for example we can do eine items and goo flex and that'll push the item towards the end of the cross axis as you might remember by default it's set to stretch to scripts so they stretch themselves all the way from the start of the axis to the end of the axis let's also try flex start and of course we can do Center now I want to give you a little task I want you to make the content appear in the bottom right corner here so go ahead and pause the screencast do that and when you come back I'll show you the solution as well so hopefully you pause the screencast and completed the task let's look at the solution we want this chunk of items here to appear down in the bottom right corner and let's first push it all the way over to the right then willing to target the cross axis the aligned items and change that to flex and as this is the end of the cross axis the horizontal one now we also need to place it in the end of the main axis which now goes from top to bottom meaning that we'll also set just by content to flex and and there you go in the next lecture we're going to look at wrapping so stay tuned and I'll see you there Hey in this lecture you're going to learn how to wrap items in flexbox so here we have our standard navbar it contains three items and each of them are just as wide as the content inside of them forced them to be what I want to do now is target each of the icons give them width of 300 pixels as you can see they now fill the entire width of the container however they're clearly not 300 pixels wide each they're scaled downwards as the container is less than 900 pixels wide in total however if we widen it here as you can see they become 300 pixels wide when the container is wide enough so what happens here is that flexbox won't allow you to set the width explicitly if there's not enough within the container itself to fill that content it'll automatically scale it down and by default it won't allow you to for example push any of the items down to the next row and that's because flexbox has a flex rata pre and set to no rack by default it doesn't allow wrapping meaning you can only have one row or one column along your given main axis but if we change this to happen instead you can see that it now allows you to wrap the content because you have the home here the search here and when it tries to fit in the log out doesn't have enough room to add the item so it wraps and puts it on the next line the next row and if we shrink the container even more it'll wrap so that there's only one item in each row now the total width of the container is less than 600 pixels meaning it can only fit one 300 pixel item on each row however if it has enough room it fills up with as many items it can on each row okay so that was a quick intro to flexwrap i'll see you in the next lecture hey there in this lecture we're going to take a deep dive into the Flex property which we talked about in previous lesson so now I have a very simple version of our navbar this time it only contains two items the home item and the logout item and they both have a flex of one that means that they'll take up half a space each and they'll grow and shrink with the size of the container however as I mentioned earlier flex is actually a shorthand property for three other properties they're called flex bro thanks shrink flex ASIS and setting flex equal to rhom and when we set the Flex value we're actually setting all three of these and even just writing one is actually also kind of a short tab because what we're actually saying here is one rum zero my first number is the grow value the second is the shrink value and the third is the basis value so this is also the same as setting one one zero so it's kind of three levels here you can write it the hard way doing like this or the slightly easier way doing it like this or the absolutely easiest way doing it like this okay this might seem confusing so let's actually go through these appellees here one by one I'll remove this one and also comment out the Flex grow and flex string now copy that over here now we're gonna do is set the Flex basis on both of the items we'll set it to 200 pixels and do that on both now we have a container with two items which each are set to 200 pixels at least they'll be 200 pixels if the container is more than 400 pixels wide so Flex basis is a way of setting the base width of the element so they allows at 200 pixels regardless of how much extra space there is in the container if there's less than 400 pixels they'll actually start to shrink but that's something we're gonna look at a little bit later so let's not get ahead of ourselves there let's move on to the Flex grow if we cut this out here and paste it in there same thing here now you can see they actually grow with the width of the container so flex grow basically decides how much of the extra space should be distributed to the various items if we set them to 0 on both lease this extra space will not be distributed to either home or log out since they both have a flex grow of 0 however if for example log out gets a flex scroll of 1 it'll take up all of the remaining space and home will get nothing on the remaining space but as you saw if the home also has value 1 it too will grow with the size of the container and now as these values are identical both have won the flexbox layout will distribute the extra space evenly across the two items so these two numbers also work in relation to each other if we set logout to 2 you'll see that the logout grows twice as quick as the home this will be a bit more apparent if we use a larger number for example 5 now when it grows you can see that the logout is clearly glowing faster than the home item and actually it's growing 5 times faster so just to reiterate on that if we set the both of these to 0 then we have the extra space on the side and the wider we make the container the more extra space we have however if we give the log out click scroll 1 it will take up all of the available space and grow into it we make only the home have a flex Grove 1 it will take up all the available space grow into it and if both of them are set to 1 they will distribute the extra space evenly across each other ok so now let's move on to shrink let's set these like scroll values back to zero copy the shrink down here and down here so as you remember even though we've set the basis here to 200 pixels the Flex container will force them to be less than 200 pixels if the container is less than 400 pixels like now now there may be other than fiction 150 pixels each or something like that and that is because Flex shrink is set to 1 meaning that they will both shrink at an equal rate and this is actually the default value for flag' shrink so while the grow is by default set to 0 the Flex shrink is by default set to 1 meaning they fire remove this one and this one will still have the same behavior they both shrink and an equal rate let's get them back again okay now let's change the Flex drink to zero for the home item what will happen now is that when we reach the 400 pixel threshold and the items will have to start shrinking the log out will do all the shrinking while the home stays at 200 pixels so the log out is doing all the shrinking since that as flex shrink is set to 1 while home thus none of the shrinking since this flex shrink set to 0 now let's change the Flex drink on this one to something greater than 1 and see what happens then let's add 5 for example rabbits now is that when we reach the threshold the whole item is shrinking much quicker than the logout item it's actually shrinking 5 times faster than the logout item so these numbers work in relation to each other meaning that you have to look at both the numbers this one and this one to understand how one of the numbers play out on the page because now log out has a flex drink of 1 and as you can see it shrinks really slowly because one is a small number in relation to 5 order if we take this back again and set the Flex drink of home to zero when suddenly logout grows all the shrinking because one relation to zero is infinitely more okay so let's rewrite these two here through the behavior we want we want conflicts crow actually it could be at one Romanus like shrink to be at one and do the same thing here and have reflux bases stay at 200 so now they grow and shrink at the same rate and they have and they are 200 pixels by default so now we can get back to the shorthand again we're going to do flex and run run 200 pixels this is the exact same thing as this meaning we can remove this and also drop it or we create this logout like okay so finally I want to give you the task for this lecture what I want you to do now yes that once this container here crosses the threshold of 400 pixels I want you to make the logout item grow 10 times as fast as the home item so go ahead and do that and when you come back to the screencast I'll show you the solution okay hopefully you pause the screencast and did the assignment it's really easy actually if you want the logout to grow 10 times as fast as the home item you simply set the Flex grow which is the first one of the 3 to 10 now as you can see the logout grows really fast and home grows really slowly however when they start shrinking they both shrink at an equal rate meaning when they're less than 200 pixels they both shrink and grow actually at the same rate but once they crept across the 200 pixel threshold about here the logout takes over ok so that's it and I'll see you in the next lecture be they're really nice thing about flexbox is that it has so called source order independence meaning that you can move around on the items cardless of how they're laid out in the markup and an example of this is the order properly so let's see how it works we have the three items home search and logout in the container here and I've given them number as that simply makes it easier to follow what's going on here I've also given them classes of item 1 item 2 item 3 let's head over to the CSS and give the item to for example order property 1 and what happened here is that the search jumped over to the third spot where the logout used to be and I've not changed anything in the HTML the source order is still 1 2 3 but the order on a page is 1 3 2 and you might be a little bit confused about why setting the value to 1 results in it in placed all the way at the end and that is because by default the order is set to 0 so whatever items that have an order above 0 for example one who replaced at the end however if we give it a value below 0 for example minus 1 it'll be placed in the beginning so let's also add a selector for item 1 and item 3 default they're all set to 0 so if we set them to 0 I won't result or anything if we want the first item to for example pair at the last spot can give it a value above 0 for example 5 or 4 or 3 or 2 doesn't matter stay at the end of the main axis as long as its order is above the order on the rest of the items so what I want you to do now is to make these three items appear in the opposite direction of how they're originally laid out meaning it's 3 to 1 instead of 1 to 3 and I want you to do that using both passive and negative numbers in the order here so go ahead and do that now and when you come back I'll show you how to do this well okay so hopefully you completed that task let's now do it ourselves the second item here say at the same place that's the first and the third which will basically be swapped and we're gonna use positive and negative numbers so I'll start with targeting the third item the logout one and set this to minus one now that's first and then we have to set the item one the home to be a positive number one and now that is laid out towards the end three two one and that was it I hope you managed to do this as well and congratulations you've completed the main section of this flexbox course so give yourself a pat on the back and if you have any questions feel free to ask that in the QA section and and I'll answer it as soon as possible thank you hey in this bonus lecture you're going to learn how to create a fully responsive navbar which adapts itself to various screen sizes using a bunch of the concepts you've learned so far including flex Gro flex shrink flex basis flex wrap and the order property so here is our navbar it has four items and it's only the search item which is flexing as you can see it grows and shrinks with the size of the container and that's because we've given the search item a flex value of one while the others are only as wide as the content inside of them force them to be I've also added a bit different styling to this example as you can see we're only using one background color as that looks a little bit nicer and the reason we used different background colors in previous examples was because there was a bit more pedagogical however by now you should know the basics of how flexbox works so we don't need different colors in the HTML you'll also see a few changes as the container we're using an unordered list and list items as the Flex items as this is a little bit more semantically correct for creating a navbar the search item can be found here and as you can see I've added an input field so you can actually write inside this search field nothing happens if you try searching for anything now this navbar works well on wide screens and it works well too right about here where it starts breaking because the search suddenly can't fit anymore so what we want to do here is actually allow the container to wrap and to place two items instead of four on each of the two rows so let's do that we'll head over to the index dot CSS and we'll simply create a media query set it to 600 pixels and inside of it forget the container and allowing strap because right now it won't wrap regardless of how narrow you make it simply will not allow you to add items on multiple rows it will only allow one row to change that will do flex wrap and set it to wrap as you can see now it'll allow wrapping here the logout wrap down to the second row though this doesn't look very nice let's go back here and we'll target the items but it's at their Flex value to flex grow rum flex shrink one who ever flex basis 50% because that'll make each row fit two items like that and as you can see we have home and profile in the first row and search and logout on the second row each taking up 50% of the total with now I actually want to align the search place holder text in the center instead of at the left hand side so I'll go search in perks and do line so that looks a bit better this has nothing to do with the Flex box itself it's just a design choice okay so now we have two different states this one and this one and it's actually pretty nice however if the screen becomes even narrower look what will happen it'll actually break at this point pushing the search and the log out onto a row each wherever home and profile can still fit on one row so flex box will allow them to stay on the same row when it reaches this point each item it's a single each now I don't want this middle stage here this one the vertical layout is good for very narrow screens mobile phones for example and this one is good for a bit wider screens but this layout isn't really that useful so let's rather control this by creating another media query this time copied from here and added that 400 for example and what we need to do now is at this point I'll get each of the items like we're doing here however instead of giving each item 50% of the row in the width we'll give them a hundred percent so I'll just copy this actually and change this to a hundred percent as you can see now the breakpoint at 400 pixels to reach here gives us a clean transition from this state to this state now finally what I want to do is move the search all the way to the bottom because I think it makes sense to have the search at the bottom when the layout is fully vertical to do that well target the search and simply give it an order of 1 and it comes down to the bottom and remember that's because by default order is set to 0 for all these items and whatever item which has an order above the others for example this one has one which is above 0 will appear after the others so that was it I hope you learned something feel free to play around with this and change it however you want and if you have any questions just leave them in the Q&A section thank you hey and welcome to this bonus lecture where we are simply going to experiment a little bit with an image grid in flexbox if you've seen my CSS grid course you'll probably recognize this grid ass I've simply formed one of the screencasts there and changed round things a little bit and I actually do recommend you to create image grids in CSS grid as that is made for two-dimensional layouts while flexbox is mainly one-dimensional however you can't recreate quite a lot of cool grids in Flex box as well so let's just jump into it and play around a little bit here we have our images they can also be found in the IMG folder over here and we have the basic set up here the container just has a display of flex and as you can see that just lines up the images after each other and there are a bunch of them and they're way out of the flexbox container because flex box won't allow you to wrap any of the items it'll force everything to be on the same line so let's first actually scale these images down a little bit let's give them a width of 850 pixels and a height of 100 pixels now that'll change their aspect ratio a little bit but let's not care about that because it looks kind of nice okay and now we want the images to wrap of course and as you remember to do that we could do flex wrap and which by default it's no wrap and we're just going to remove the no and boom you can see now wraps a nice little image grid however as you can see at this point they're skewed over to the left-hand side so one thing we can do to make it a little bit nicer is to do justify content it's at that center now center it looks pretty we can also try these around for example that'll add some space around the images though here you can see the problem when flexbox only can fill three items on the last row the space around the images will be different than these of course resulting in this funny looking grid ish layout here but with a different type of grid down here there's not an easy way to have these three images over at the left hand side for example so that only the last spot here will be open when you do space around it'll do space around on each of the rows separately if we did X start wooden Sentret like I did previously now we have much more space here and here even though we have this more grid dish layout okay so what if we want these images here to be flexible in their rhythm now we've just hard-coded their width and height though what we can do instead is actually use percentages here let's do a hundred percent and 100 percent and we'll also do object fit hover move this justify content and now it looks really broken just hang on a minute what we'll also do is we'll target the items themselves and I'll give them a flex value of let's grow one like a shrink one and base width for example 150 pixels which we've previously had now you can see they scale up and down and also shuffle around when needed so here their base with 150 pixels but they're allowed to grow and shrink and the images themselves just take up whatever space each of the Flex item has got available and with the object fit cover they take up all the width and all the height and cover the entire window and that will result in you not seeing all of the images in even time if that's important this is not a good solution however you just want most of the images to appear in the box don't care if it's cropped a little bit is actually a pretty nice solution so ever xbox lays out as many items as it can on each of the rows as an evenly distributed throughout gross so when it gets to this point where we have ten images here and our eleventh image that which is the last one down here it'll be placed on a single row meaning it'll be five times as wide as the others just an optimal however these widths looks pretty nice now we also have some big images here given them class names of biggie here I want to try out is actually do container and then target those big ones and here I'll actually target normal ones specifically as I've given random classes of more and more as you can see here and now they're the same however if we give the big ones 250 pixels in base width you can see that that works as well it scales up and down however now we've said that we want the big images to start at 250 pixels width and the normal image is to start at 150 pixels width and they are both to grow the container has room for it meaning you have this pretty cool looking grid okay feel free to play around with this perhaps with just the values here you can drag and drop some more images in here maybe some vertical and horizontal images and try to adjust their flick spaces basically do whatever you want so how's it I hope you learn something thank you

Channel: freeCodeCamp.org

Views: 221,132

Rating: 4.9474053 out of 5

Keywords: learn to code, programming, coding, javascript, web development, web design, tutorial, python, android, security, testing, coding tutorial, javascript tutorial, web development tutorial, html, css, design, html tutorial, css tutorial, learn to program, learn how to code, learn how to program, get a programmer job, get a developer job, python tutorial, android tutorial, linux, learn programming, learn coding, linux tutorial, learn linux

Id: -Wlt8NRtOpo

Length: 48min 43sec (2923 seconds)

Published: Fri Mar 23 2018