This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Browser Support and Overview" Lesson
[00:00:02]
>> Estelle: So browser support.
>> Estelle: So the reason I have a load button for browser support for can I use, but I have no internet access. All browsers can use it. The reason I have a load button is because if your action page comes in, kinda like Code Pen, it shifts everything over to the left.
[00:00:26] So I create a little feature. Anyway, I don't know why I'm not getting let me just try this here, I do have internet access. So look at all that green. That's beautiful, isn't that beautiful? And if I do show all, you're talking a long time, but with prefixing, and you're talking about starting with IE10 but with prefix.
[00:00:47] We are not going to cover the prefix values because we're so close to being done with them that I'm not going to spend the time going over them. Here is the specification. It's called a CSS3 feature, but as I mentioned earlier today, it's actual level 1, because it is the first level of flexbox.
[00:01:05] It's the first time that it's been defined. It's been being defined for years. So here I have an unordered list of navigational items. It says Home, About Us, Jobs, and Contact. And because they're list items, they take up the whole width, right? So
>> Estelle: There's a typo in here somewhere that I'm supposed to remove so that it actually works.
[00:01:34] Display flex.
>> Estelle: Where's my typo? There. Sometimes I put typos in things so that it doesn't activate and I couldn't see that I put it back so let me just put the period back in front of this okay so one notice the period is not removed from here.
[00:02:00] If the parent is not flexed the flex property does absolutely nothing. Here, I'm going display a flex. That's all I'm gonna do, I'm gonna do two things, two new features. I'm gonna display flex and I'm gonna justify-content center.
>> Estelle: And align, whatever.
>> Estelle: So, by basically just setting.
[00:02:42]
>> Estelle: Okay. If all I had done was use the two basic properties, it's already looking really good. I just displayed the parent as flex. And then I said make all the children the same size. If I got rid of this it would not grow.
>> Estelle: That still looks good, right?
[00:03:01] Just display and flex.
>> Female: What does auto do?
>> Estelle: We're going to cover all of that.
>> Female: Okay. [LAUGH]
>> Estelle: Okay. So, holy grail layout, or magically holy grail layout, I think it is. So, we, you often create a page, right? You have a header, an article, the navigation, the aside and the footer.
[00:03:19] Sometimes you might have the article after the navigation, but for mobile I would rather have the article before the navigation. Which one do you want? Basically you wanna code it in the order that you want to search engines and the readers to use it, your optimum reading order.
[00:03:40] You can display it however you want afterwards. So here I have the header, the article, the navigation, the aside the footer because the aside and the footer are not important and the nav I want after the article, but you can go the other way around. So all I'm gonna do is I'm going to display flex on the body.
[00:03:59] I'm going to say I want to flow in columns which is going to be a top A middle and a bottom. And then the main, which surrounds the article of the Nav on this side. I'm going to also display that flex. So the main is going to be both a flex item and a flex container.
[00:04:16] We're going to understand this better even if this makes no sense. I'm going to explain everything and then it's all going to make sense. And then it's going to be flex of 1, which means all the elements can grow or that element mainly can grow. And that article, which is a child of main, is going to have a flex of 1.
[00:04:34] And Nav is going to have an order of negative 1, which means it's going to change the placement. So let's get rid of the comment right here. And there we go. So what that is, it's basically said header, the main section, and the footer are displayed flex. The main section is also displayed flex, and within that, within this group of article, nav and aside.
[00:05:00] I took the navigation, I change the order of that navigation, I put it first. And I'm gonna teach you all how to do this later on, but I just wanna give you an overview of what we're gonna cover. Then I had the article in the aside, and basically the nav and the aside were as small as they needed to be, and the article was allowed to grow to take up everything else.
[00:05:20] So I'm gonna show you how to make that article grow, and I'm gonna show you how to both make things Laid out in rows and in rows and in columns, which is the opposite of how it's declared and it's going to be very confusing.