Child Flexbox Properties Demo

[00:00:00]
>> So all we've talked about so far is everything on the UL, this all has to do with parents at this point in time. And so now let's take a look at the children. There actually aren't that many properties for the children for the LIs, but the main one happens to be this.

[00:00:19]
So down here in the LIs, we have the ability of changing our order. And so if I simply say for my LI order of one that is gonna do absolutely nothing for me at this point, that is just setting all six of those boxes to have a value of one for the order.

[00:00:40]
But then if I were to take my class, remember up here in our HTML we had a couple of classes of flex2 on the LIs. So if I were to reset this to flex2, and I said order of 2, that will pull out those two boxes in this particular case, the properties the way we have them set up box number 2 and box number 5, and it's actually pulling them out and putting them second here in the order.

[00:01:10]
So they're gonna wind up showing up later in our layout. So the things with the order of 1 show up first 1, 3, 4, 6, and then the two elements that have the order have 2 show up later. Obviously you could add many more classes and you could then put your boxes in whatever order you want them to display them in.

[00:01:34]
You can also set so called widths and I use the air quotes because the CSS property width should never be used inside of flexbox. The property you wanna use is one called flex basis, flex basis has to do with how wide is this box sort of? So we say it's gonna be whatever 30% let's say, man might actually wanna being 25% sometimes or 20% sometimes maybe it's more like 50%.

[00:02:10]
It just sort of depends on what's going on in your flexbox layout. When you use the CSS property of width and you say the width is 30% it will never be 29.9 It will never be 30.1% it will always be 30%. So when you work with flexbox you wanna work with flex basis as the width property here, and so you can write that out longhand.

[00:02:40]
So let's just say flex2 here for example, we could say our flex basis is, I don't know 25% and then our min width here, we should probably have that go away. So the two items now there they are item 2 and 5, they both have about half of the width overall about 25% for those two.

[00:03:10]
And then the other boxes where we haven't defined the flex basis, they're as wide as their content. That's what's going on here. So if I set up here just on the LI in general and I said the flex basis here was something like 10%. Then we have as you see here a narrower set of boxes 1, 3, 4 and 6.

[00:03:34]
And 2 and 5 happened to be wider and that only adds up to 90%. So we don't have quite the full 100% for the row. There's some other properties that are here that are part of this that are called flex grow and flex shrink, they have to do with how fast the box gets wider or how fast the box gets smaller relative to the other boxes.

[00:03:55]
What I find is that most people are not using these particular properties in layouts necessarily, and that is because they can be a little bit unpredictable in terms of the layouts and expanding things on the screen. So I'm gonna kind of skip over those in terms of a longer explanation, but you can write those out if you want.

[00:04:16]
You can say flex grow and it's just a number for a value, so these are going to grow two times faster than the other boxes are for example, yes.
>> What's the difference between flex basis 30%?
>> Yeah. And width 30%.
>> For the list items, yeah. So if I said width here, so width of 30% Okay, they are going to be a width of 30% no matter what.

[00:04:50]
So I will start to push them off the screen, at some point in time here or not they're just gonna be 30% say how they never flex at all. I'm making my screen bigger, I'm making my screen smaller and they never flex at all, okay? As opposed to using a flex basis of 30% and here now these will flex.

[00:05:25]
If I have it set up to do that. So if we get rid of these things here. Okay, yeah, that's it. So now, see how those boxes got a little bit bigger, see how to get a little bit smaller. See how we can still squash them down. Look at that.

[00:05:48]
So here 1 and 3 are clearly a little bit smaller than number 4 is. 4 is got some text that's actually going into overflow here. Number 2 is the same kind of issue. So that is what flex basis is doing. And if we set this back to width again, So they are what they are.

[00:06:17]
See how they all change exactly the same size no matter what, they're all 30% of their container width and so as opposed to like one in three getting a little smaller to accommodate number four which has some text in it. So they are what they are when you use width.

[00:06:36]
They're not as flexible as flex spaces. Somebody else had another question about the difference between something like stretch in flex box versus max height or min height or something like that. So back in the old days when we did our layouts with floats, by default, the height of your elements are as tall as your content, okay?

[00:06:58]
So content however tall the content is in the particular box, that's how tall that box is. Your height measurement, the CSS property height, can artificially make that taller, okay? And of course you can use max height or min height to control a little bit about that height. But recall that that is for that one particular box.

[00:07:21]
And so what the flex box will do is it will within that particular row that particular set of boxes that we're looking at when you use the stretch property, it will stretch to make those boxes as tall as the longest piece of content. And so then equalize all of the boxes in the row to that same height, this is something we used to have to do with JavaScript when we did it with floats or layouts with floats, and we wanted to have equal height boxes so now that's just baked into Flexbox And makes all of your boxes equal height from there.

[00:07:57]
So what I would recommend is if you do need equal height boxes something like flex box or grid, as you'll see tomorrow will be a much better approach than playing around with max heights. Because again when you are playing around with max height, min height, you may wind up with some overflow eventually anyway.

[00:08:17]
And then flex box or grid they are set to deal with that for you.
>> Can you talk about the thought process between using flex direction row versus column?
>> What do we wanna use between rows and columns? So generally speaking if you wanna be laying out a web page you're gonna use rows, and we're gonna go through that here that's my next thing to talk about is using flexbox in a grid system.

[00:08:42]
So you're gonna most likely like 90% of the time when you're working with flex box you probably gonna have something with rows. On occasion, and we do have an example of this later on in the course, flex box can be useful for columns. Maybe you actually do want to stack a whole bunch of things on top of each other, especially if you're looking at some UI, particularly if you're looking at say a card.

[00:09:06]
And maybe you want some elements of your cards stretched out horizontally in at one particular screen dimension, and you want those things stacked vertically at a different screen dimension you may wind up using the column property for that