Combining the flexbox sizing properties using the flex shorthand

[00:00] There is also a shorthand for these three values. I can use the flex property that lets me pass three values, flex-grow, flex-shrink, and flex-basis, all space delimited. There are multiple configurations of these things. The defaults are different in this configuration just to mess things up. Let me show you a couple of examples.

[00:19] In this example, flex is set to one, which it doesn't have a unit so it gets passed through to the flex-grow property. Flex-shrink is also set to one because that's what the default is. Flex-basis is set to zero, which is unusual because flex-basis usually defaults to auto. But in this syntax, if flex-basis is not defined, it defaults to zero.

[00:39] In this next example, flex is set to 20 pixels. Because it has a unit of measurement, the only value that could be is flex-basis. Flex-grow defaults to one, which is weird because usually it defaults to zero. Flex-shrink still defaults to one here. Flex-basis gets that 20-pixel value.

[00:56] Here, in this example, I'm defining a unitless measurement first, and then I'm defining a measurement with pixels on it. Flex-grow gets the first measurement, which is zero. Flex-shrink gets one, still default. Flex-basis gets that 80 pixels.

[01:13] What's important to notice here is that the flex-grow and the flex-basis defaults are different when you use the flex shorthand notation than when you use the flex-grow and flex-basis notation.

[01:24] What's nice about this shorthand is if I set all the flex properties to one, which means a flex-grow of one, and a flex-shrink of one, and a flex-basis of zero, it makes all the children the same size and all grow to use all the space, which is something you'll find you'll often want to do with flexbox.