Name: Flexbox Layouts: CSS Tutorial (Day 22 of CSS3 in 30 Days)
Uploaded: 2020-03-30T06:45:18.000Z
Duration: 21 min 37 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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?

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.

Subtitles ListPlay Video

Flexbox Layouts: CSS Tutorial (Day 22 of CSS3 in 30 Days)

specific

essentially

incredibly

content