Learn CSS FLEXBOX in 20 Minutes

in this video we'll go over the basics of flexbox in CSS and thanks for checking out this video we're going to go over the basic flexbox properties and if you're just starting or even thinking about starting a career in web development you're in the right place I upload new videos every week hit subscribe in the belt to get notified and stick around to the end and I'll show you how to build this a responsive image grid so what is flex box flex box is a layout mode in css3 it provides a more efficient way to layout align and distribute space among items in a container even when their size is unknown or even dynamic that's why it's called flex box before a flex box there were four layout modes it was the block layout for laying out documents the inline layout for laying out text position layout for explicit positioning and the table layout for laying out 2d tabular data so you may be wondering what about floats well floats were actually never intended for layout they were a CSS recreation of the old align attribute in HTML now smart web developers found ways to abuse them to create complex layouts but it's not ideal as anyone who's forgotten that clear fix knows all right let's look at some code so I've got V s code set up here and I've got an index.html file and I'm running live server so we can see this in real time let me show you the HTML here it's very simple so in the body we have a div with the class of flexbox container and within that we have three divs and then in the CSS it's very basic as well I don't have anything in the flexbox container so far the Flex box item I've set a width some background color border color font size padding and margin just very basic stuff and then in each item I've specified a minimum height so we've got 50 pixels on item 1 100 pixels on item 2 and 250 pixels on item 3 so right now on our web page we have the three divs and they are all aligned horizontally as you would expect with divs and divs always start on a new line so what we can do in this flexbox container we can add a property of display flex and then what that does is it creates a flexbox container and everything within that container is then put onto a row by default we can specify that this should be a column but by default it is a row and to help you see everything that's going on here I set up some CSS and an external stylesheet as well so I'll uncomment that and save it and so now you see the container div so one thing to note about Flex box is that the flexbox layout is directionally agnostic as opposed to the block layout which is vertically based or the inline layout which is horizontally based so in Flex box we have two axes the main axes always follows the direction of the Flex box so this flex box is set up as a row by default so the main axis would go horizontally so to demonstrate those axes I've also set up some code and I'll paste that in here and then save that and now you see the main axis always goes along with the direction of the Flex box so this is a row the cross axis would be vertical so if this was set up as a column the main axis would then be vertical and the cross would be horizontal this will make more sense in just a minute so if we go back up here to the container notice that the child divs are all aligned to the left and that is by default as well so there is a property called justify content and you see several options here so flex start is the default we could set it to flex end and I'll save that and now you'll see that it aligns along the main axis to the end which is all the way to the right another option here is Center so it will then Center along the main axis there's a couple of other useful values which are spaced between so that divides the available space equally between each element you'll notice that on the sides there is no additional spacing besides the padding and margin that we've added so another one that we could do is space around and then that divides equally around all sides of the child objects and then another one is spaced evenly and that will evenly space each element along the main axis so just remember that justify content is always referring to the main axis it could be vertical or it could be horizontal depending on the direction of the Flex box all right so that's the main axis now let's look at the cross axis so for the cross axis we will use align items and by default this is set to stretch so you'll notice that we have assigned a minimum height to each one of these items but each of them are exactly the same size so the default here again is stretch so let's change that to flex start and I'll save that and now you'll notice that along the cross axis it has now aligned the items flex start at the top they're not stretched to fill so I can change that to flex end and now they are aligned along the cross axis at the bottom or the end of the cross axis we can also change it to Center and it will align them on the center of the cross axis so then again just remember justify content is for aligning along the main axis aligned items is for aligning along the cross axis all right I'm going to get rid of these axes markers I don't think we need them anymore alright let's set these to 50% and you'll notice that these are not 50% and watch what happens when we shrink and expand the window again they are not 50% a flexbox is doing what it's supposed to here so there is another property that we can add and that is flexwrap and by default it is set to no rap so right now it's squishing everything together so let's set this to rap and I'll save that and so since each one is set to 50% it's now wrapping each one so let's take this down to 25% and now you'll see that it can fit two on a row and then the third one it can't fit so it wraps that one below and with rap turned on there's another property that we can look at and that is a line content and for now I'll set it to Center and you'll notice when I save that that nothing happened so in order to demonstrate this I'll need to add a height property and I will make the height of the container 95 of the view height and now you'll notice that everything is centered so aligned items aligns each item to each other aligned content aligns the entire group within the container so if I change a line content to flex start they will all align to the top and flex end that will align everything to the bottom so to demonstrate this again I can change this to 15% get everything on the same line and now it's easier to see that aligned items is centering each item to each other but a line content is aligning the entire group to the end of the container aligned content has the same available values as justify content so we could set this to space around and it evenly distributes the space on the top and the bottom of the entire group so if we change this with back to 25% to get the row to wrap now you'll notice that it has space around each row of the group so number 3 has wrapped down to a new row so the space is even on the top in the middle and on the bottom so if we change this to space between you'll see that now there's no additional space on the top or bottom it's all in between the two rows changes back to Center now the entire group is centered okay there's a couple more properties that we need to cover for the container so what I will do is I'm going to get rid of everything here and we'll add a flex direction so this is where you can tell it if it's a row or a column so by default it is set to row and there is something called row Traverse which takes the row and reverses it same with column there's a column reversed I've never used those so you'll mostly use either row or column so let's set this to column and I'll save that and now you'll see it it looks just like it did before we added flex to this container so again let me add a height here and we will again set this to 95 view height and you'll see now there's some extra space at the bottom so in this column we can do a justify content now remember justify content goes along the main axis and now since we're set up as a column the main axis is going vertical so we'll set this to center and let's see what happens it aligns the column now in the center along the main axis we can change this to space around so now it adds space around each object do space between and now it evenly distributes the space in between we can also add a line items and let's Center that and that aligns the column to the center of the Cross axis and the cross axis is now horizontal there's one more item that we could assign to the Container and that is flex flow now flex flow is a combination of the Flex direction and flex wrap so we could say column and wrap that would be the same as flex direction and flex wrap here so if I save that you'll notice nothing changed so I can actually delete these two lines here and and have it here on one line flex flow column wrap so those are the basic properties for the container let's move on now to the properties that we can assign to the child items to do that I'm going to just delete these things and go back to a normal flex box all right and let's change these back to 15% make them a little bit narrower so that we can have some extra space in this container so something that we could assign to a child element is Flex grow and if I set that to one watch what happens item one now grows to fill all of the available space and if I set that on item two now they evenly distribute the space between one and two it's a one-to-one ratio and I could do the same thing here flex grow set that to one so now they're evenly growing to fit the available space if I wanted to to be a little bit bigger I could set item two to two and now it is a little bit larger it's distributing the available space with at a two to one ratio to make this a little bit more apparent we can change this one to let's change it to four times so it's a four to one ratio save that and now if we resize the browser you'll notice that it is growing four times as much as one and three now once we get below that 15% with the threshold that we've set they are all going to be even but there is another property that we can set to manage that as well so we could set Flex shrink and we'll set that to one here we'll add flex shrink and we'll set this one again to four and flex shrink and set this one to one so grow ax when the items don't completely fill the container that's when grow activates shrink activates when the items become smaller than the width that they are set to so as I decrease the window you'll notice that number two is smaller now than one and three to demonstrate that a little bit better let me make these wider set these to 25% and now when we start to shrink you'll notice that number two shrinks four times as much as one and three okay so that's grow and shrink and now instead of setting the width there is actually something called a flex basis so we can add this to the flex item which is all of the child elements this flex basis and if I set that to 25% you'll notice that nothing changes but I can actually get rid of this width here and still nothing changes so we'll set this down back down to 15% and there you go Flex basis is the starting point of the items width so another way that we could write this I'll remove it from the Flex box item and I'm going to remove all of the grow and shrinks from each item and we can write all of this in one line so just flex the first property here is the grow so we can set that to 1 and the shrink we'll set that to 1 as well and then the Flex basis and we'll set that to 15% on the second item we will do flex and I'm going to do this one one and 25 [Music] third one I'm going to do flex and let's do five five and twenty five all right now I'll save that so now you'll see that one it's fifteen percent and these are twenty five percent but the third item is set to grow and shrink five times as much as the first two so let's resize the browser and you'll see three is growing five times as much as two and shrinking five times as much another item that we could assign here is a line self so this would be on the child item aligned self and let's say Center and save that and so now again that the default here on this row is stretch but we can go to to individual child elements and specify and align self and tell it where we want it to align so we could say Center on this one and this one we could say align self to flex end and this one we will align self to flex start since the container is not larger than the third item it is taking up the entire height so if we go back to the container and we add a height and we'll add that 95 view height back and now you can more easily see item 1 is in the center item 2 is at the end and item 3 is at the start now another thing that used to be pretty difficult in CSS was aligning something perfectly in the center of an element with Flex box it's pretty easy so we have these numbers here and they are all in the top left corner so the Flex item is a child of the main container but we can have multiple Flex containers within Flex containers so we're going to turn the children into Flex containers as well so we're going to display flex and I'll save that and you'll notice that nothing happened so now we will justify content Center and aligned items Center and watch what happens now the content of the children are aligned perfectly in the center all right the last property that we will discuss is ordering so we can actually change the order of these items without changing the HTML normally you would come down to the HTML and cut and paste and move these items around but we can actually specify that in the CSS so to demonstrate that let's say that this first container is the main content of your website and then the second container is the left aside so the left sidebar and the third one is going to be the right aside and that's the right sidebar so for the purposes of SEO you may set up your HTML this way so that when google goes through your webpage it sees your main content first and not the sidebar and another reason could be for screen readers the CSS would not apply to screen readers so the ordering of your HTML actually matters but in the CSS we can come up here and we can assign an order and we want item 1 to actually be number 2 because that is our main content and we're going to want that in the middle of the page and so then we come down to item 2 and we want the order of this one to be 1 we want it to be first on the left side of the page and then we can say order three for the last one it is going to remain on the right side so now if I save that now you'll see we have left main and right and just to make this easier let's set all of these back to stretch that stretches the default actually I could just delete them delete all of these aline selfs and now you can see left main and right alright so now let's look at a real world example so I've got this grid HTML that I have created and let's go through the HTML portion first so in the body we've just got a header with some text there's a single row and then within the row we've got columns this div column has images each one has a bunch of stock images so there's four columns and that's it pretty simple we've got a column class and a row class so let's go up to the CSS so we're just setting everything with the box sizing of border box to mitigate any margin and padding issues body margin zero font family header all the stuff at the top here is pretty standard so then we go down to the row and we've got a display flex and a wrap and then on the column we're doing a flex 25% so we're not setting the grow or the shrink we're just setting the Flex basis here and then on the column image we've got some padding we want the width to be a hundred percent of the available width and vertical-align:middle just to make everything even and then we've got a couple of media settings here max width of 800 pixels so that means anything under 800 pixels we're gonna change the column flex to 50% so initially it's set to 25% so that we can have four columns if the media width is less than 800 pixels though we only want two columns and then if the media is less than 600 pixels we want the column to then be a single column so one hundred percent alright so let's take a look at this in the browser alright so right now we're under 600 pixels so it's one column right so let me resize the browser and as soon as I get over 600 pixels it goes to 2 column and then we'll increase it to over 800 and now we're set to four column all right so it's pretty simple to create these flex boxes and align things and Center things and adjust things exactly how you want them so that's all that we're going to cover in this video I have some more advanced CSS videos on the way so hopefully this video helped you if you enjoyed it a like is appreciated if you want to see more content like this subscribe and hit the bell and i'm on twitter and instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 35,755

Keywords: learn css flexbox in 20 minutes, learn flexbox in 20 minutes, learn flexbox, learn to use flexbox in css, css flexbox explained, css flexbox tutorial for beginners, css flexbox axis explained, css flexbox guide for beignners, best css flexbox tutorial for beginners, css flexbox tutorial, flexbox tutorial, flexbox, css flexbox, justify-content, css, how to use flexbox, what is flexbox, how to align content using css flexbox, flexbox grid, align-content, align-items, css tutorial

Id: qqDH0T6K5gY

Length: 21min 53sec (1313 seconds)

Published: Mon Jul 29 2019

Reddit Comments

[u/codeSTACKr]

I just hit 300 subscribers on my YouTube channel!! On the way to 1000..

Here is my latest video. This one goes over the basics of CSS Flexbox. I hope this helps at least 1 person. I appreciate any and all support. Thanks!

[u/hightrix]

Additionally, this is a great reference for Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[u/Ferlinkoplop]

Look into Flexbox Froggy... you will learn how to use Flexbox insanely fast.

[u/Harbltron]

Commenting to come back to this, after all the node I've been writing it'll be good to bone up on my css

[u/sherazaa]

Do you know what does it include?

• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap

I filtered and found this list with their description at

https://www.web4college.com/css-play/demo-flex-basis.php