Using flex-direction to layout content horizontally and vertically

Using order to rearrange flexbox children

Demystifying alignment in flexbox children

Defining dimensions on flexbox children using flex-basis

Using flex-shrink and flex-grow to make flexbox children resize correctly

Combining the flexbox sizing properties using the flex shorthand

Turning a flexbox into a grid using flex-wrap and align-content

Using Flexbox in Websites and Applications

Flexbox Fundamentals

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

[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.

Course

Flexbox Fundamentals

Combining the flexbox sizing properties using the flex shorthand

Share this video with your friends