Check out a free preview of the full CSS In-Depth, v2 course:
The "Setup Flex Container and Items" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to set up the Flexbox container and basic Flexbox Item properties.

Get Unlimited Access Now

Transcript from the "Setup Flex Container and Items" Lesson

[00:00:03]
>> Estelle Weyl: The components are, our flexbox, our first to create a flexbox, which is simply the display property. Then to set the direction, which is done with flex-flow, which is both the direction, as to whether it's row and columns, and to whether it's allowed to wrap. Then you have alignment, which is justify-content, align-items, align-self, and align-content.

[00:00:24] Then you can order things, and you saw me order, the taking nav and move it some place else, so you can actually change the order of an item. And then you have flexibility of the items themselves. The article was allowed to grow, that means it was flexible, it could grow.

[00:00:37] So flexibility is a flex property which means it can grow, it can shrink, and it will do so proportional to how you declare it. Proportional to the other elements that can grow and shrink. And that is all part of this thing called flex property which has three components called flex-grow, flex-shrink and flex-basis.

[00:00:57] So if you thought we were done for the day, these are actually the properties that we're about to go over.
>> Estelle Weyl: Okay?
>> Estelle Weyl: So let's dive in. So the first step is to add display flex or inline flex to a parent. Then set the flex-direction to horizontal or vertical and then say whether you can wrap, your items can wrap onto more than one line.

[00:01:25] So we have a display property and the display property has many, many different values. If you've ever taken an interview and they've asked you what are the five values of the display property. You should say, how did you get this job cuz you don't know what you're doing?

[00:01:40] Cuz I've actually been asked that and I'm like, five? There's so many more. And that was before flex and grid came out. We've always had table-cell, table-row but most people know inline-block, list-item. Display none, and what other ones do they know?
>> Estelle Weyl: That's mostly what people think are the five.

[00:02:04] Inline, block, list-item, none, and one other one in here. Anyway, we have two new values for flex which is flex and inline-flex.
>> Estelle Weyl: I actually one time got that interview question and I think I rattled off ruby, ruby-base, ruby-text, and the guy thought I was wrong, and yeah.

[00:02:31] So we have, this was inline-block was the one I forgot when I was just mentioning, okay. So we have inline-block, list-item, flex and inline-flex. So display flex is basically a block size element and inline-flex would be inline-flex. Which would mean it would not do it clear both before and after.

[00:03:01]
>> Estelle Weyl: Is Flexbox supported in your browser?
>> Estelle Weyl: Can I use prefixless Flex Box? If yes, if it supports display flex, make the background green.
>> Estelle Weyl: And if it supports display block, which means it supports the supports property cuz everything supports display block. It would have made it red because then it would have been no.

[00:03:25] If it was white it didn't support supports. Okay, so that was just a fun feature. Okay, so let's add display flex to this box. So we have a first box, a second box, and a third box. By default, when we hit display flex,
>> Estelle Weyl: It,
>> Estelle Weyl: Takes every element and makes it into a flex item.

[00:03:53] And it says basically it can't grow or shrink, it just becomes the size of its content. So that's why it's so small. If I said actually flex 20%, that's not 20% that's 33%, right? So we're gonna cover flex later, but it's basically saying, yes it can grow, yes it can shrink, and it should be 20%.

[00:04:14] It, by default, will start off at being 20% and then allow it to grow to take up all the available space.
>> Estelle Weyl: Display: inline-flex. We've already covered that one. Okay, what is a flex item?
>> Estelle Weyl: So when you display flex on an element, that becomes a flex container.

[00:04:38] And all of its direct children, not its grandchildren, but just its direct descendants, all of them become flex items, including text. So if you have text without a parent, if you say display flex on a paragraph and it's a paragraph that has four lengths and two spans. Everything that comes before the first link and after the first link and between, before the second link, all of that, you'll have many individual flex items.

[00:05:09] Those are called anonymous flex items. They will inherit all the flex, like they will be impacted by all the flex properties. But they aren't directly targetable, so you can't actually grow and shrink on them. It can't get the flex basis, it can't get the flex property, but it will become a flex item.

[00:05:30] So it can be aligned top, it can be aligned bottom which we'll learn how to do later on. So all non-absolutely positioned child nodes are flex items. Generated content, if you have generated content, that would actually be a flex item. So you could start off with a generated content flex item, have that text, then that link and the spans in that paragraph I was talking about.

[00:05:55] And then the after generated content. And when I say not absolutely positioned child nodes, if something is absolutely positioned, the paint order is still within the order of the flex. And it inherits some things, such as the width of the flex container, but it doesn't take up any of the space.

[00:06:16] So it's kind of a flex item, but not really a flex item. So at the bottom it says flex items, all non-absolutely positioned child nodes. And at the bottom it says, well kind of, absolutely fixed and position elements are kind of flex nodes.
>> Estelle Weyl: Things that are not flex items are the first line and the first letter.

[00:06:36] So if you actually, you can do generate content before and after those will be flex nodes but first line and first letter will not. And if you have just white space between that start of the paragraph and the first link, that white space will not become a flex item.

[00:06:51] So you have many things that are becoming flex items. It's best to just basically have everything in an element, so that you can control it. But if you're not doing that, you will have what they call anonymous flex items. So there are certain CSS properties that are impacted by flex.

[00:07:13] So some of the CSS properties, when you have something that becomes a flex item, it just ignored. Like the float. You know how like we float it left and right? That would just be ignored cuz you can't float a flex item. So you can have the fallback of doing floats.

[00:07:30] You can do a whole floated layout and then include flex, and you're good. They're not gonna conflict, because it will just ignore the float. A vertical-align, it has its own alignment, so you don't need vertical-align. Clearing won't work, and all the column properties like column gap, column count, column width.

[00:07:52]
>> Estelle Weyl: Certain properties are changed, have a different impact. Margin, when you have two adjacent margins, they collapse upon each other. In flex, they don't. Min-width and min-height normally default to zero. When it comes to flex box, it actually defaults to auto. And visibility, collapse is a feature that, basically, you can't really use it.

[00:08:26] So it'll collapse it and it normally just makes it hidden.