Have already welcome back to see us this three and 30 days.

Today's date number 22.

We're gonna be playing around with some flex box.

Now, back in day nine, we used CSS to create some modern layouts.

Essentially, what we're gonna do today is create those exact same modern layouts.

But instead of using floats and clears and margins and math, we're going to be using flex box.

And I'm gonna show you how incredibly easy it is to create layouts with flex box.

Now, bear in mind, Flex box is a relatively new technology and not fully supported a totally across the board.

But it's pretty darn good, and you can use your discretion on where you want to use it.

Of course, can I use dot com is a great website to see which properties and values those combinations, which of those are more widely supported so you can use your own discretion and you can always use fall backs as well.

Other thing I want to tell that you know, is Flex Box is a large area of study.

It's not just a quick little property or a quick little style is actually a lot to it, and I don't want to cover the massive amount of theory involved in Flex Box.

I'm gonna give you a really great resource.

In fact, it's actually my favorite coding.

Blawg is CSS Dash Tricks by Chris Coyer, and he has got The Complete Guide to Flex Box.

And I've referred to this on numerous occasions when making my own flex box layouts and websites.

So as you could see its last updated on November 12th which at the time of this recording was only about 15 days ago.

So he's always updating this, and I love I love this article that he's put to put together this guide.

It gives you the background on flex box and the basics and terminology and all the properties and everything that you would ever need to know about Flex Box.

It's really great and a great practice.

So part of my homework for this lesson would be to whether you want to do it before or after we make some layouts is head over to see SS dash tricks dot com slash snippets slash you know what?

I'm just gonna put a link up on the screen here and um, you know, just Google CSS tricks flex box as well that will get you there.

I'll put it up on the screen, whatever you need to do to get there, so check that out.

Credit to Chris Coyer for that.

So let's get back to it.

What is Flex Box?

Flex Box is essentially relatively new technology.

Since 2009 and onward, there's been multiple iterations of flex box, but basically it's an easy way to create layouts so that you don't have to use floats and clears and and all that sort of stuff it makes creating layouts and sidebars and organization of content incredibly easy, incredibly streamlined, naturally responsive.

Of course, you can modify it and customizing whatever way you wish.

And when you see how easy it is to create some simple and modern layouts, you're gonna wonder why you didn't use flex box before.

Now, before you just jump on the flex box train, remember, you need to do your homework and your due diligence to make sure you're not creating a production ready client site.

That's only based on certain flex box properties that may not be cross browser compatible.

So do your homework.

Let's jump in and show you what we got.

So day number 22 Flex box layouts.

The same layout organization as the day number nine for modern layouts and down in the final result, you can see the layouts we got Header article aside, Footer, Basic layout content and sidebar.

Number two Got the logo and the In the Navigation and header with two sidebars on article in the middle.

Flex books lay out.

Number three essentially seemed header here, but the logo's on the rights.

We got three equally sized articles in a three column grid within a main content and then a footer.

So that's really it.

And let's jump in to our code editor.

See what we got.

Day number 22 Flex box layouts.

Go ahead and download that.

Come back to this and let's get started in here.

We got some basic markup we got.

The sandbox is what we're gonna be playing around with, and each layout is within a section tag with the class of late 12 and three, respectively.

We have headers, a main content with articles on the sides footers.

It's very semantic, straightforward, simple H M 05 And of course, final bout CSS is there for your reference to help you out.

If you meet, have any issues.

Of course.

Keep in mind that every class for the final result is pretended with final double underscore.

Whereas we're just gonna be using the class is called Layout 12 and three.

And the reason why I do that is so that those styles don't conflict so that the final homework, the final result doesn't conflict with the sandbox.

So let's jump in.

Now, keep in mind, this isn't gonna be a theory lesson.

So if you've never heard of flex flex box before, a certain piece of parts of this might be a little over your head, so giving you a fair warning right now, I'll do my best to explain certain things.

But I do recommend you read that Chris Coyer guide on Flex Box should take you about 15 20 minutes or so just so you can understand what's going on when we start playing around with some properties.

You maybe never heard of or late.

One main were selecting the main tag with in late one.

We're gonna tell a display flex so instead of like, in line or block, we're gonna say flex, and that's going to tell everything within the mean content in that mean tag to to be aware that this is a flex item, this flex container and the flecks direction is going to allow us to tell Tell the browser how to display the direction of the content.

So in bootstrap will use things like did with the class of row while in flex box, we just simply use flex direction and weaken se ro so we don't actually have to, like, create another tag in HTML to do essentially just this.

So we're gonna tell it that the main content container is actually gonna be a row.

It's gonna contain a row.

And you can also do things like ro reverse to reverse the order of the elements.

So if you have 123 you can actually save reverse, and it will actually go 321 So I might show you an example that after, So that's it we have to do for that.

Nothing's gonna happen yet, So we're gonna say, lay out one and then article.

So in this element, we have an article and an aside now to make that article fit a certain amount 3/4 ish of the width and the sidebar be on the side with a smaller amount of with.

All we're gonna do is say Flex, and this is a shorthand property.

I believe it's flex, grow, shrink and basis Kind of like when you write border and it has, you know, solid one pixel red.

That's a shorthand for three different properties.

So I'm just gonna say Flex one.

Now, what this says is any articles within the layout element the layout class have them all take up the exact same amount of space.

So you that's gonna make a lot of sense when we get to lay out number three when we've got three identically sized articles.

If I were to say flex one or say Flex to the article will try to take up twice as much space as the other elements within the flex container.

So but this one is just gonna take up the same amount of space as every other article or element that is within that content.

So let me just show you if I just say flex one, let's see what happens so you can see that it just automatically created to 50% with elements, not because they said 50% but because I said flex one the Arctic will take Article will take up the same amount of space as the other elements within that container.

Now, if I say flex too, it's not gonna do anything because because the other elements the aside doesn't actually have ah flex property styled on top of it.

So if we just went down here and said layout one aside and then said Flex one and see that you can see now that the article is twice the size as these side now, you might be wondering, OK, but those were really fixed sizes.

But if I don't want to just always be two times the width or three times that with what if I want to find Tune that well, you actually can do that quite easily.

So I'm gonna remove aside here and just style the article gonna see flecks one as a basis, and I'm gonna say 58% now, this is essentially this value is going to tell it the wig, the maximum width and that's not technically maximum with.

But it's the space that you wanted to take up so you can kind of override that 1 to 1 ratio and then refresh.

Now it's taking 58% of the width of that container Now.

What I find interesting is, if I were to change this to 50% it's gonna go to its regular 50% width.

But if I were to go to 100% it's not going to actually fill it out 100% because Flex Box knows that there's still a container there, so it's not gonna push it down.

It still needs to fit within there.

So it's This is roughly I don't really know.

It looks like it's around 75% so I'm not really entirely sure of the reason why it does that, but it's kind of smart, so I'm gonna go back to my 58% with ah space there.

Now, the problem is these air jammed up against one another, someone a little bit of space.

So all I'm gonna say here is just the margin right?

2% and that will give it some space.

Ah, and it doesn't make the aside tank fall down or anything like that.

It just automatically distributes the width so that both of these elements can live happily ever after within its flex parent.

Now, if I were to say flex direction, row reverse, its going to reverse thes as you could see Now the aside is on the left and the articles on the right.

Despite the way I've coated the markup, which is really neat.

This would take a lot more to style in CSS.

Ah, and would be there's a little bit of hackery going on there if if I was trying to do that and just floats and clears and so on and so forth.

So Ro reverses a nice value for flex direction, But I'm gonna put it back to here, and that's it for the first layout.

That's all we had to do now if I had to do this and just floats and clears, I wanted to do math and would have had things collapsing and would have been a little bit stressful and confusing.

Now that's not to diminish how much is going on here.

There's a lot going on with shorthand property.

I encourage you to read about it and test it and play around with it.

But you could see how exciting this is, Uh, when creating layout.

So let's jump into a layout number two and we're gonna say Lay out two header!

We're gonna say display flecks, of course.

Flex direction.

This is something that you're gonna often be writing these two things Row and then within there were going to say lay out two Header and the knaves were selecting something more specific.

We're gonna say Flex one Say that and let's see what happens so far.

So you could see now that they're both jammed up kind of its.

What's happening is that flex boxes on Lee taking the calculating the wits Beith based on the content within the container itself.

For the most part, it's kind of like an inline block, so to speak.

That's why we have to use additional properties to space them out and tell flex box how much space we want distributed between the elements.

So I'm gonna go down here and say, Lay out two header knave and I'm gonna say flex one hopes flex and then one, and so that changes it to take up the entire amount of its its space that's available for it.

As you can see, it just did.

It filled out almost like 100% of its available space.

And I'm gonna say, Margin left to give it some space.

I'm gonna do 2% again and that'll give it space.

So just like that, I've created that simple layout like that.

Now I wanna move down to the main elements.

A layout to Maine, some selecting that main tag.

And I'm gonna say display flex flex direction, of course.

And you guessed it, RO.

And now I'm gonna say lay out too.

Article.

So now I'm selecting the article within their now Keep in mind, there are also two asides on either side of the element.

I'm gonna say flex and one Now if I just did that, let's see what happens now.

Everything here.

Very interesting.

What's going on here?

Let me just take the flex one out of there and let's see what happens now that I told it to be ah flex element.

The main container here, the side on the left is this size.

The article on the middle is this size a bit bigger, quite a bit bigger.

And then the article on the right side, the side on the right side is quite a bit smaller because there's less content.

So all this is being intelligently calculated as best as it possibly can.

Bi flex box to try and automatically size the elements based on it just being a flex element.

But I want to override that and tell it to be specific.

So I'm gonna say flex for the article, say one.

We'll see what that does.

Nothing good, because based on the other to flex elements, it starts making things wonky, which is why we want to start adding some percentages here.

So I'm gonna say 50 6% and that's gonna give it 56% of its available of the available space for it.

Now, problem here is these asides or throwing off this element here.

I don't want it to be like this, so let me just first give it some margin, so I'm gonna say Margin, uh, let's go zero and 2% on the left and right.

Okay.

So, uh, space on the bottom here.

I don't really want that, so I'm not gonna write shorthand.

I'm gonna say margin left.

2% margin, right?

2%.

That should keep it.

There we go.

The other nice thing of a flex boxes.

Do you notice how these elements are maintaining the same height as the article?

How the aside despite this?

Only having this much content is still this long, which is as long as the article, which is as long as the other side.

That's the other cool thing.

So if you wanted a background like on these elements that to maintain the same height as the growing content, it's very easily and automatically done without you having to do anything and flex box.