Learn Flexbox in 15 Minutes

hello everybody in this video we're going to dive into the different parts of flexbox starting with what flexbox is and how flexbox works and then we're going to dive into the different properties that we can apply to flexbox in order to lay out in style our elements as we want so to get started let's add a div inside of our body here we'll give it a class of flexbox container since this will be the container that all our fluxbox items will reside inside then inside of this container we'll add another div give it a class and we'll call this one flux box item and we'll also give it a class of flexbox item one I will we know which item we're referring to when we styled it individually if you save that you'll see that we have a gray box show up on the right here and that's because I've already applied some styles to these flux box items so that we can distinguish them and see them now let's copy this and add in two more flux box items and save that and you'll see that we have now three flux box items instead of our flexbox container but we don't have any styling to actually make this a Flex container so to get started with creating a Flex container what's going to our Styles here we have our flex box container selector and we can just say display and set it to flex and this is how we create a Fox box container now if I save that you'll see that all of our items are now the same height and they all show up in one row you'll also notice that if I shrink our browser you'll see that these items will scale their size to fit within the browser and as I make it wide enough for them to all fit you'll just show up on the left side of the screen and this is really the main thing that flex box has going for it it allows you to style the flexibility and sizing of different elements in the container from the actual container selector here this flexbox container without ever having to style the actual flex box items so inside of the container for flex box you can do things such as laying out your different elements across the different rows and columns as well as aligning them inside of that layout and then the items themselves you can specify how you want them to flexibly grow inside of the container or how you want them to shrink inside of the container to make this easier to see I've created some background styles here and if we save this you'll see that we now have our fluxbox container which is this yellow background item and then are different fluxbox items with their embers in the corner as these grayish colored with a border that is a little bit darker gray this way we can see when we shrink our browser you can see that these items shrink together and as we increase it they'll grow again now before we get started with actually laying out and styling a different elements inside of our container we first need to understand the concept of the main axis and the cross axis inside of a flexbox container I have these styles here that will show us the main access and cross access for our flexbox container and as you can see this main access goes horizontally across the entire flexbox container while the cross access goes vertically this is because our flexbox container is laid out in a row as opposed to a column fluxbox gives us a property on the container called the Flex direction where we can set if we want our flex box to be a row or column based layout and depending on this these main axis and cross access will actually flip so in a column based layout the cross access will go horizontally and the main axis will go vertically all you really need to remember is that this main axis will go the same direction as your layout so in a row layout it'll be horizontal and a column layout it'll be vertical and in order to style the layout of these elements you style them based on the axis this so the main axis or the cross axis and not based on vertical or horizontal so if we wanted to style our elements on the main axis we would use the justified content property inside of our flexbox container right now our main axis has a flex start attribute applied to which means that all the elements will align at the start of the main axis if for example we wanted to Center these items inside of this main axis we would change this from flex start to center and if you say that you see that now all of our fluxbox items are in the center of our container another thing that we can do is if we wanted to layout our elements with space between them we could use the space between property here and now all the extra space inside of our Flex container will be put evenly between all the different items inside of our container and if we wanted to have space on the outside of our container as well we could use space around which puts an even amount of space on all sides of the Flex items and not just in between them this makes laying out items in a horizontal manner very easy inside of flux box due to this justify content property but if we wanted to for example lay out things on this cross access we would use the align items property and right now the default for this is stretch which means our items will stretch to fill the most amount of space vertically that they can that's why some of our items that were smaller grew to full size if we wanted to keep the size of our items we would use flex start and then all of our items would align themselves at the very top of our flexbox container based on this cross axis we could also use Center here in order to Center them vertically which is one of the most important things that you can do with Flex box before flexbox aligning items vertically inside of a container was nearly impossible both fluxbox is as easy as one line of CSS and it will perfectly align all of your items inside of this container the last way to align our items inside of our flexbox container is to use the align content property and this property is only for using on multi-line fluxbox containers but as you saw when we shrink our browser size these items just shrink to take up the amount of space needed but if we change our flex box here to use the Flex wrap property and tell it to wrap you'll see that our items will wrap on two different lines instead of shrinking their size as you can see here and this aligned content property tells it how much space to put between lines for example if we use flex start all of our items will line up at the top of the container while flex and we'll line them all up at the bottom of the container an easy way to see this is if we add a height property to our flexbox container so if we put the height here and we just make it let's say 700 pixels now you can see that the Lex end for a wine content has made our flex box items all wine at the bottom of our container voila flex start will make them aligned at a start and this has very similar properties to justify content for example we could put space between here and now we have spacing between our flex box item rows and if we shrink this even further you'll see that there's now even space between them as well which is great but aligned content is something that I don't really use that often and really justify content and align items are the properties I use most since they align your individual rows along the main and cross axis now let's revert that height back to the default get rid of our line content justified content a line items and wrap so we just have a normal fox box container here and we'll increase that size a little bit and we'll also remove these accesses since we no longer actually need them now if we go back into our stylist here and let's say we want a column layout instead we'll just use our flex direction change it to column and now you see that are different fluxbox items show up in a column as opposed to the different row and if we used justified content and we say Center for example you'll notice that they don't Center horizontally and that's because they're centering inside of the column vertically and if we put that height back onto our Flex container let's make it 800 pixels save that you'll see that now they're centered vertically and that's because justify content is using the main axis which in this case is column as opposed to row if we used align items we put Center in here and save it you'll see that now our items are centering horizontally because the cross axis is horizontal inside of a column based flexbox container now we can revert all that back to normal so we just have our standard fluxbox container here and we can start to talk about the different properties you can apply it to our different flexbox items as opposed to the flexbox container as I mentioned the container is really only for laying out spacing between your items as well as the positioning of your items inside of the container the actual flexbox item properties are meant to either override those positioning and layout properties or to apply different flexible sizing to these elements as you can see by default when we decrease the size of our browser or items shrink in size but if we wanted to prevent that on let's say only our first item we could go in here use the Flex rink property and set it to zero to say we don't want it to shrink at all and if we say that you now see our first item does not shrink no matter how small our browser gets but these other two items shrink together we could also use the Flex grow property if we wanted to tell our items to grow bigger so if we increase our size here we have all this extra space let's say we wanted our third flexbox item to fill that space all we would do is that flex grow to be won and now that item takes up all the extra space no matter what size our browser is we can also use flex grow on multiple items so let's say we want our second item to also grow we can just apply it to here and as we increase our browser size you'll see that they'll both grow proportionately to one another so that way this item the Flex box item two and fluxbox item three are the same exact size since they have the same exact flex grow number if we for example change this to be two and increase the size of our browser you now see that our fluxbox item two is about twice the size of our fluxbox item three you will notice however that fluxbox item two is not exactly twice the size of fluxbox item three as you would think by making flex grow twice as big but all the Flex grow property actually does is take all of the leftover space so if we remove these folks grows here you see we have all this leftover space and it divides it between all the different flex grows so if we have a flex grow of two here and we have a flux grow of one on the third item fluxbox item two will get twice the amount of available space that fluxbox item three gets so if we say that you'll see that this fluxbox item two has gained twice of the available space that was left over as flexbox item three and the reason that fox box item two is not actually twice the size of fluxbox item three is because we have a width set on our flex box items so it takes this 200 pixels and then adds the amount of available remaining space onto that 200 pixels if we wanted to override that we could use what is called the Flex basis property and this tells our flex box where to start growing from so if we change this to zero our object will imagine that it is zero pixels wide when it starts adding an additional space to it and if we did this for both of our items here and saved it you'll see that now Fox box item 2 is exactly twice the size of bucks box item 3 because it started adding additional space onto them in a two-to-one proportion so it added twice as much to fluxbox two as it did to flex box three but they had no starting point at all they started at zero which means that fluxbox 2 here is twice the size of box three when they started at 200 pixels it still added twice as much space to Fox box two as Fox box three but they had a 200 pixel beginning size so they weren't actually exactly twice the size as the other one for the most part flex Gro flex shrink and the different justify content and align item properties or all you really need in order to create dynamic and complex layouts in either a row or a column based container but if you needed to override the cross access alignment of a property you can do that with the aligned self property and let's say we wanted our second Fox box item to be in the center of the container instead of stretching the full height of the container we can just use that and now you can see that this aligns self property overrides are aligned content of our other containers and you can see that it aligns in the center here while these other items are aligning stretch and this can be applied to all of our different containers for example we could go up to our flex box item one here and make this one flex and and you'll see that now this aligns itself at the end of the container instead of stretching which is the default for our line items applied to our Fox box container the very last property that is left to talk about is the order property that can be applied to our Fox box items this allows us to change the order of our items inside of our flexbox container without actually changing our HTML so for example if we wanted Fox box item 1 to be our third item we would change the order to three Fox box item two let's say we want to be our first item so we change the order here to 1 and then we'll change the order of this Fox box 3 to be an order of two and if you say that you now see that our second item is at the beginning of our container our third item is the second item in our container and our first item is the very last item in our container and this is because we use the order property to rearrange the order visually of our items without changing the order in our actual HTML this is a property I highly advise not using unless you really need it because this actually messes up the flow for people using screen readers since the screen reader will still go in the order the HTML which means they'll get eight Fox box item one first Fox box item two second and Fox box item three third even though the order of display is different than that this also messes up when you're tabbing through different form items for example if this was an input element for a text box our tab would go to the flux box item one first and then flux box item to second even though they're displayed in order where it should be to first and then three second so that's why I highly advise not using the order property unless you really need to rearrange the orders visually without actually messing with the HTML of the document and that's really all there is to a flexbox container for the most part you just need to have a container that wraps your different flux items you give it a display of flex to say that you're using a flux box container you then use the justified content properties and the align item properties inside of your container in order to tell it how you want to line these items inside of a container and then lastly you can use the different Flex trink grow and vases properties in order to layout your items individually inside of the flexbox container to grow or shrink as you need a shorthand for these different flex shrink grow and basis properties is just the straight-up flex property where the first number as your flex grow the second number is your flex ring and the last number is your flex basis this is a great shorthand property that you can use in order to apply all three of those different properties in one line you can also leave off the later properties such as if we only wanted to flex grow to be one we just put flex one and it will intelligently assign the Flex trink and flex basis properties without us having to actually manually set them so I hope you guys enjoyed this video and learn something new about flex box and how you can use flex box in order to create dynamic layouts for your site if you guys did enjoy it please make sure to leave a like down below and in the comments let me know if there's anything else about flex box you want me to talk about in more depth in either a future video or in a comment for you guys thank you guys very much have a good day

Channel: Web Dev Simplified

Views: 429,936

Rating: 4.975101 out of 5

Keywords: webdevsimplified, learn css flexbox in 15 minutes, learn css flexbox in 20 minutes, css flexbox explained, css flexbox tutorial for beginners, visual css flexbox tutorial, easy css flexbox tutorial, simple css flexbox tutorial, easy css flexbox tutorial for beginners, simple css flexbox tutorial for beginners, learn css flexbox fast, css flexbox axis explained, css flexbox guide for beignners, best css flexbox tutorial for beginners, css flexbox for dummies, css flexbox tutorial

Id: fYq5PXgSsbE

Length: 15min 12sec (912 seconds)

Published: Thu Sep 27 2018