We're going to dive into the different parts of Flux Box, starting with what flex boxes and how flux Box works.

And then we're going to dive into the different properties that we comply to flex box in order to lay out in style or elements as we want.

So to get started.

What's that a did inside of our body Here, We'll give it a class of flux box container, since this will be the container that all our flex box items will reside inside.

Then inside of this container, we'll add another dude.

Give it a class and we'll call this one flex box item, and we'll also give it a class of flex box item one.

Will we know which item we're referring to when we style them individually?

And if you say that, you'll see that we have a great box show up on the right here, and that's because I've already applied some styles to these fucks box items so we can distinguish them and see them.

Now let's copy this and adding two more flux box items and save that you'll see that we have now three flux box items instead of our fucks box container, but we don't have any styling to actually make this a flex container.

So to get started with creating a flex container, what's going to our styles?

Here we have our Fox box container selector, and we could just say display and set it to flex.

And this is how we create a fox box container.

Now, if I say that, you see that all of our items are now the same height and they all show up in one row, you'll also notice that if I shrink our browser, you'll see that these items will scale their size to fit within the browser.

And as I make it wide enough for them to all fit, you'll just show up on the left side of the screen.

And this is really the main thing that Fucks Box has going for.

It allows you to style the flexibility and sizing of different elements in the container from the actual container selector here, this fox box container, without ever having to style the actual flux box items.

So inside of the container for fuck's box, you could do things such as weighing out.

You're different elements across the different rows and columns, as well as aligning them inside of that way out and then the items themselves.

You can specify how you want them to flexibly grow inside of the container or how you want them to shrink inside of the container to make this easier to see.

I've created some background styles here, and if we save this, you'll see that we now have our fox box container, which is this yellow background item.

And there are different flux box items with their numbers in the corner.

As these greyish colored with a border that is a little bit darker gray, This will weaken.

See, when we shrink our browser, you still the side of a string together and as we increase, it will grow again.

Now, before we get started with actually laying out in style in our different elements inside of our container, we first need to understand the concept of the main access and the cross access to side of the flux box container.

I have these styles here that will show us the main access and cross access for our fucks pocket container.

And as you can see, this main access goes horizontally across the entire flux box container while the cross access goes vertically.

This is because our fucks box container is laid out in a row as opposed to a column.

Flex box gives us a property on the container called Flex Direction, where we can set if we want our flex box to be a row or column based layout and dependent on this, these main access and cross access will actually flip.

So in a column based layup, the cross access will go horizontally and the main access will go vertically.

All you really need to remember is that this main access will go the same direction as your lay up.

So when a rollout, it'll be horizontal column layout.

It'll be vertical, and in order to style the layout of these elements, you style them based on the access is so the main access, but across access and not based on vertical or horizontal.

So if we wanted to style are elements on the main access, we would use the justified content property inside of our fox box container.

Right now, our main access has a flex start attribute applied to which means that all the elements will line at the start of the main access.

If, for example, we wanted to center of these items inside of this main access, we would change this from Flex start to center.

And if you say that you see that now all of our fox box items are in the center of our container.

Another thing that we could do is if we wanted to lay out our elements with space between them.

We could use the space between property here and now all of the extra space inside of our flex container will be put evenly between all of the different items inside of our container.

And if we wanted to have space on the outside of our containers, well, we could use space around, which puts an even amount of space on all sides of the flux items, and not just in between them.

This mix laying out items in a horizontal manner very easy inside of flux box due to this justify content property.

But if we wanted to, for example, layout things on this cross access, we would use the alliance items property and right now the default for this is stretch which means our items will stretch to fill the most amount of space vertically that they can.

That's why some of the items that were smaller grew to full size.

If we wanted to keep the size of our items, we would use Flex Start, and then all of our items would align themselves at the very top of our fucks box container.

Based on this cross access, we could also use center here in order to center them vertically, which is one of the most important things that you could do with flex box before flex box.

Aligning items vertically inside of the container was nearly impossible, but with Fox, box is as easy as one line of CSS, and it'll perfectly align all of your items inside of this container.

The last way to align our items inside of our fuck sparks container is to use the align content property, and this property is on Lee for using on multi line flux box containers.

But as you saw when we shrink our browser sized, these items just drink to take up the amount of space needed.

But if we change our flux parks here to use the flex wrapped property until it to wrap.

You see that thou are items will wrap on two different lines instead of shrinking their size.

As you can see here and this align content property tells it how much space to put between the lines.

For example, if we used flex start, all the items will line up at the top of the container, while flex end will mind them all over the bottom of the container.

An easy way to see this is if we add a height property to our fucks box container.

So if we put height here and we just make it, let's say, 700 pixels.

Now you can see that the Lexx end for a line of content has made our flux box items all women at the bottom of our container, while Flex Start will make them a line at the start, and this has very similar properties to justify content.

For example, we could put space between here and now we have spacing between our flux box item rose and if we shrink this even further, you'll see that there's now even space between them as well, which is great.

But a line content is something that I don't really use that often and really justify content.

And the line items are the properties I use most.

Since they align, your individual rose along the main and cross access.

Now let's revert that height back to the default, get rid of our line content, justify content online on and wrapped.

So we just have a normal fucks box container.

Here we'll increase that size a little bit, and we'll also remove these accesses since we no longer actually need them.

Now, if we go back into our stylist here and let's say we want a column layout instead, we'll just use our flex direction, change it to column, and now you see that are different.

Fucks box items show up in a column as opposed to the different row.

And if we use justify content and we say center, for example, you'll notice that they don't send her horizontally, and that's because they're centering inside of the column vertically.

If we put that height back onto our fucks container, let's make it 800 pixels.

Save that.

You'll see that now they're centered vertically, and that's because justify content is using the main access, which in this case is column as opposed to Roe.

If we used a line items we put center in here and say that you'll see that now are items air centering horizontally because of the cross access is horizontal inside of a column based flex box container.

Now it can revert all that back to normal.

We just have our standard fucks box container here, and we can start to talk about the different properties you were gonna fly tow are different flux box items as opposed to the flux box container.

As I mentioned, the container is really only for laying out spacing between your items as well as the positioning of your items inside of the container.

The actual flux box item properties are meant to either override those positioning and layout properties or to apply different flexible sizing to these elements.

As you can see by default only decrease the size of our browser are items shrink in size.

But if we wanted to prevent that on, let's say only our first item, we could go in here, use the flex shrink property and set it to zero to say we don't want to shrink at all If we say that you nasty our first item does not shrink no matter how small our browser gets.

But these other two items shrink together.

We could also use the flux agro property if we wanted to tell her items to grow bigger.

So if we increase our size here we have all this extra space.

Let's say we wanted our third fucks box item to fill that space.

All you do is that fucks grow to be won.

And now that item takes up all the extra space.

No matter what size are browser is we can also use fucks girl on multiple items.

So let's say we want our second item to also grow.

We gonna supply it to here.

And as we increase my browser size, you'll see that they'll both grow proportionately to one another.

So that way this item, the flux box at him, too.

And fucks box item three are the same exact size says they have the same exact fucks grow number.

If we, for example, changed this to be too and increase the size of our browser.

You now see that our fox box Item two is about twice the size of our Fox box item three.

You will notice, however, that fucks box Adam to is not exactly twice the size of Fox Box item three, as you would think by making flex grow twice as big.

But all the flex grow property actually does is take all of the leftover space.

So if we remove these fucks grows here, you see, we have all this leftover space, and it divides it between all the different flux grows.

So if we have a flex grow of two here and we have a fuck's Grove one on the third item flux box had him too.

We'll get twice the amount of available space that fucks box item three gets.

So if we say that, you'll see that this fuck's box out of two has gained twice of the available space that was left over as Fox Box Side on three.

And the reason that Fox barks at him, too, is not actually twice the size of fucks box side of three is because we have a with set on our fucks box items.

So it takes this 200 pixels and then add the amount of available remaining space onto that 200 pixels.

If we wanted to override that, we could use what is called the Flux Basis property, and this tells our Fox box where to start growing from.

So if we change this to zero, our object will imagine that it is zero pixels wide when it starts adding additional space to it.

And if we did this for both of our Adams here and saved it, you'll see that now.

Fox Box Adam, too, is exactly twice the size of Bucks Box Adam three, because it started adding additional space onto them in a 2 to 1 proportion.

So added twice as much to flux box, too, as it did the fuck's box three.

But they had no starting point at all.

They started it zero, which means that FUCKs box to here is twice the size of FUCKs Box three.

When they started a 200 pixels, it's still added twice as much space to Fox box to as Fox Box three.

But they had a 200 pixel beginning size, so they weren't actually exactly twice the size as the other one.

For the most part, flex, grow, flex drink and the different justify content and a line item.

Properties are all you really need in order to create dynamic and complex layout in either a row or column based container.

But if you needed to override the cross access alignment of a property, you can do that with the Alliance Self Property.

And let's say we wanted our second fucks box item to be in the center of the container.

Instead of stretching the full height of the container, we could just use that.

And now you can see that this align self property overrides our line content of our other containers, and you can see that it aligns in the center here while these other items are aligning stretch, and this could be applied to all of our different containers.

For example, we go to our Fox box Item one here and make this one flex end, and you'll see that now this aligns itself at the end of the container instead of stretching, which is the default for our lion items applied to our fox box container.

The very last property that is left to talk about is the order property that could be applied to our fucks box items.

This allows us to change the order of our items inside of our folks Park's container without actually changing our HTML.

So, for example, if we wanted fucks box item one to be our third item, we would change the order to three Fox box Adam to let's say we want to be our first item.

So we changed the order here toe one, and then we'll change the order of this Fox box three to be in order to.

And if you say that you now see that our second item is it the beginning of our container?

Our third item is the second item in our container On our first item is the very last item in our container.

And this is because we use the order property to rearrange the order visually of our items without changing the order in our actual HTML.

This is a property I highly advise not using unless you really need it.

Because this actually messes up the flow for people using screen readers.

Since the screen reader will still go in the order of hte e mail, which means they'll get eight Fox box out on one first Fox box side of two seconds and fucks box item 3/3.

Even though the order of display is different than that, there's also messes up when you're tabbing through different form items.

For example, if this was an input element for a text box, our tab would go to the flux box out on one first and then fucks box item to second, even though they're displayed in order where it should be two first and then three seconds.