Flexbox Fundamentals

[00:00] Hey guys in this video we're going to talk about flexbox. Now flexbox is a layout mode, or a display mode available to us in CSS 3. So to get us started, I'm going to create a parent div, it's going to have a few of these child divs, I'm going to go ahead and number those, I'll make their inner HTML that number, and we'll go ahead and create five of these. So if I save that on the right we can see our five divs.

[00:26] Let me go ahead and jump over to our CSS here and give those child divs a little bit of style, just so we can see them, save that, and we can see all of our divs laid out exactly as we would expect in a display block mode. Now for our parent div, I'm also going to set up a couple defaults here, we'll make that 100 percent wide, we'll give that a height of say 350 pixels, and we'll also give that an outline of let's say 1 pixel, solid, black.

[00:56] Now to get started with flexbox, we are going to say display flex, we're going to go ahead and save that, and immediately we can see that our divs now appear to be laid out in a float left display. What that actually is, is the flex direction. Outside of display flex there are really only 10 properties that you need to concern yourself with, and as soon as we set display flex, each of those is set to their default value.

[01:22] Now there's two more properties, and we'll take a look at those, but those are really just shorthands that combine multiple properties. Let's start with flex-direction, now the default if I save that as row, we get exactly what we see there, so row is the default for flex-direction, but we can also do something called row-reverse, and you can see that everything seems to be right aligned, but it's actually re-ordered, so that the one is all the way is on the right, then two, three, four, five going to the left.

[01:49] Another one we can do here is column, and that's going to get us our kind of display block that we were expecting, and then we can also do column-reverse, which is going to push those items to the bottom and again, reverse that order. So the next flexbox property we can take a look at is justify-content. Now justify-content's default is flex-start. Since we're looking at a flex-direction of row that flex-start means left to right, just put it all the way to the left.

[02:18] We can do a flex-end, which is going to put it all the way to the right, but you'd notice it does not reorder those items the way a row-reverse might, and if we switch over here and change our flex-direction to column, you can see that flex-end is going to be the bottom of the flexbox and flex-start would obviously be the top.

[02:37] So we can also do a simple center very similar to like a text-align center, and a couple interesting ones we can do is first space-between which is going to distribute those items across the width of our parent container. We can also do space-around which is going to give each of our items a equal amount of space to its left and its right across the width of our parent container.

[03:03] So the next property we can take a look at is align-items, now align-items works a lot like justify-content, but where justify-content works in parallel, or measures in parallel with our flex-direction, in this case being a row, so it runs horizontally, align items is going to measure perpendicular to our direction, so in this case it's going to run vertically. So its default is flex-start which is where we're at right now, so we're not going to see a change there.

[03:29] We can go ahead and set it to end, and we can see it's pushed those items to the bottom. We can also do a center, and now we've got perfect vertical alignment in the center there. We can also do stretch. Now we're not going to see it change as soon as I update that, but what I can do is get rid of this height and you'll see that each item is going to stretch the entire height of our parent container. So the last setting we'll take a look at for align-items is going to be baseline.

[03:59] Now I'm going to save that and not much is going to happen. Let me go and set up an increased font size for our third flex-item there, set that to 25 pixels. Now the algorithm that calculates where the baseline actually is, is a little bit tricky, but if we look here we can see that each of these items is aligned at the baseline of the flex-items inner content. And the calculation that defines the baseline is calculated based on the inner content of our flex-item.

[04:30] Now to take the look at the next property, I'm going to go and strip out that increased font size, and I'm going to set up our children to be let's say 200 pixels wide, going to go ahead and comment out the height of our parent and think I'm going to go ahead and comment these guys out for right now. So this is going to be flexbox-wrap, now its default mode is no-wrap.

[04:55] You can see that even though our items are set to be 200 pixels wide, since we have no-wrap set, it's never going to let those items get bigger than what can be contained, so even if I set this to 500, we're going to get the exact same result. So if we want to go and try wrap, we can see that the items are in fact taking up the amount of space that they should, and they're wrapping when that space becomes too much. So at the two, the three wraps, and at the four the five wraps.

[05:25] The last one we can take a look at is wrap-reverse. This is kind of weird, but it just wraps in the reverse direction, so when we get to two, three wraps upwards, we get to four, five wrap upwards. Then one last property that's available to us on the flex-parent container, is flex-flow, and this is an abbreviation for flex-direction and flex-wrap. So we could say row and no-wrap in one line, save that, and we're back to our flex-row with no-wrap.

[05:59] So now to demonstrate the properties that we can set on our flexbox items, I'm going to go ahead and set all the defaults on our child class. I'm going to strip out width, I'm going to replace that with flex-box basis. I'm going to add flexbox-grow and its default is 1, flexbox-shrink its default is also 1. I'm going to add order, its default is 0and then we have align-self and much like justify-content and align-items it's default value is flex-start.

[06:32] So the first thing to take a look at here is the fact that flex-basis set to 0really just means allow each of these items to take up the same amount of space along the flex-direction, and in our case, that is a row. So we can see that each of these divs is of equal width, even when we stretch it out they'll all grow to equal width, and shrink to equal width along the flexbox row.

[06:57] Now if I jump down here and create a new rule for say child three, and I can say flexbox-grow and I'm going to pass that in a value of 3, that means that the third div will always take up three times as much space as the other divs in order to fill out the distribution across our flex container's row. So if I save that, we can see that it actually takes up three times as much space, and if I drag it out, it will always take up three times as much space, even when we shrink it down.

[07:28] So now if I do the same thing for say child one, and we'll set that to 2, we can see that child one will take up two times as much space, and three will take up still three times as much space. So the next one we'll look at is shrink, so let's say child two, we're going to say flexbox, or I'm sorry, flex-shrink and we'll set that to 3.

[07:57] Not much is really going to change here, but if we come up to our basis and we say that our basis is 50 pixels, so this is kind of like in a perfect world, all of our divs would be 50 pixels wide if it's possible. So save that, and what we can see is that everything seems to be working about the same, but when I shrink it down, you can see that the second div is willing to shrink to take up half the space or two times less space than the other divs.

[08:26] So the next one we can take a look at is order, and by default all of them are set to order 0But if I set this guy to 1, which would be an integer higher than all the rest, what's going to happen is it is going to go to the very end. Now if I come back and set order of child one to 2, of course it's going to go past that, so now we've got three and one at the end, one being at the very end, because our order value was higher.

[08:54] The last one we will take a look at is align-self. I'm going to set this to flex-end, and I'll save that, and we're not going to see much happen. But if I come up here and restore the height of our parent, what we'll see is that the three is actually at flex-end. We can go ahead and set that to center, or even stretch. For that of course you have to get rid of the height, and there we go, three is stretched through the height of our parent container.

[09:30] So one last item we can look at is the flex-shorthand which covers the flex-basis, flex-grow, and flex-shrink, so the first argument is our flex-basis, the second argument is our flex-grow, and the third argument is our flex-shrink. So save that, and everything's going to work exactly as it did. So that is all 12 flexbox properties.