[00:00] In this lesson we're going to be talking about the Flex Container. So let's go ahead and add one to our screen. But it is important to note that when we look at the Flex Container there are two very similar components. I'll just filter out my list here and you can see that we have both a Flex Container and a Flex Repeater. We're going to be talking about the Flex Repeater in another video. So let's grab the Flex Container and we'll go ahead and drag one onto the screen. Now with the Flex Container, we want to talk about the layout and how components work inside of the container. So the first thing that we need to do here is deeply select the container, and then we can go and add a couple components. Now I'm going to add a few buttons. I'll add three of them here. We can just drag them into the screen. And then once we have them on the screen, we can select them and then go and change the text property.

[01:00] So, I'll set the first one to one, the second one to two, and the third one, three, so that way we can tell them apart. Now you'll notice that we have a new panel up here at the top of the Perspective Property Editor and there's a bunch of buttons that control how the layout works inside of the Flex Container. You can control whether the components are displayed as a column or a row. You can set how much of the container they span with the Items field here. And you can set how they're spread through the container with the justify. And we can resize the container and see how they react. Now if I drop the deep selection by clicking on the background, then I can grab my corner here, and drag my components around. Now let's set these components to be very thin, and you can see they'll smush up here. And then we can set another layout property by deep selecting the Flex Container and then changing the Children to wrap. And then, you can see here that the components will actually wrap onto new lines if they need the space.

[02:05] Now this also gives you the ability to change your Content property. So we can align things on the top, on the bottom, in the center, however we want. And if we go out of our deep selection, then we can change the sizes around and see how this reacts. All right, now let's set the container's layout back to its defaults, that way we can talk about the component's position properties. So I'll set to not wrap, and we'll set it to stretch and justify there. Now each component inside the container has a set of position properties, the grow, shrink, basis and display. The display property is going to show or hide the component. Similar to how the visible property works, but it's a little bit different in that it will actually remove the component. So if I change my visible to false, you can see buttons two and three are still in the same location. But if I change my display to false, then buttons two and three move over to take up that missing space. The basis property is the preferred width of the component.

[03:05] I can change this manually or I can grab one of the handles here, and stretch the component out. The basis can be a number of pixels or it could be a percentage like 50%. If you set it to a percentage, then when you adjust the container width, then you can see that the component will actually change and always be half of that container. If I deep-select the container and select the button, and changed our basis back to pixels, so something like 80px, then we can take a look at the grow and shrink properties. The shrink property allows the components to become smaller when there's not enough room for them. You can see when I make my container more narrow, the components all shrink. This is because they all have a shrink value of one. I can select one of my components, and then set the shrink value to something that's not one, so, say, zero here, and that means that this particular component won't shrink. So now when I move my container around, you can see that buttons one and two shrink but button three does not.

[04:06] The grow property allows a component to grow past its basis. So if I select button one and I change my grow to one, and if I make my container much larger, you can see that particular component will grow to fill all the space. If multiple components have a nonzero grow value, then they will grow at the same rate, assuming they have the same value. You can see with them both set to one, both buttons will grow and shrink at the same rate here. Now because these are relative rates, if I select button two, and then set the grow value to something like four, then it will grow at a rate four times as much as button one, as we can see here, if I change the container size. Now that we know the basics, let's look at a more complex example. I have a nested Flex Container here that has a column with a bunch of Flex Container rows inside of it. Now, it's important to note that the Property Editor, the buttons that show all the different layout values for our container, is going to be based on what's currently deeply selected.

[05:13] So if I select one of these nested Flex Containers, which you can see in our project browser here, then you'll notice that the layout buttons still have that column setting, whereas our properties are showing a direction of row. That's because the root container's still deeply selected, which you can see from the little bullseye icon on the root container. Now if I deeply select one of these containers, then you'll notice that our bullseye icon changes here and now we have deeply selected in the Flex Container. And if we go to our Property Editor here, we can see that now the buttons are based on what we have selected. Now one last note, all of this Flex Container stuff is based on a web tool that's called Flex Box, and you can find tons of information online and even a few games that you can play to learn a little bit more about how these layouts will interact with each other.