This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Flexbox Setup" Lesson
[00:00:00]
>> Jen Kramer: So now we're gonna go ahead and do a code demo. In day one, we're gonna go to chapter number two, which is our Flexbox intro. And first of all, I'll point you to the file called Flexbox Properties. People here in the classroom, you have a printout of this.
[00:00:16] That's the print out that's there in front of you. If you're online you can follow along. I would actually recommend printing this out. Personally, maybe I'm just old school but I find it super helpful to have this printed out. And I can look things up very quickly as I write in Flexbox.
[00:00:31]
>> Speaker 2: I also made a PDF and linked to it on the chatroom.
>> Jen Kramer: Okay, and Marcus made a PDF of this, as well. If you want the pretty Word version instead of the ugly text version. Of course, this you can copy and paste from. So this is gonna tell you what the properties are, some of the potential values.
[00:00:46] And I'm gonna show you these in action right now. All right, so what we're gonna do is we're gonna code together. If you go on ahead and open up the Flexbox notes document, this is what I'm going to show. If you open up boxes.html.
>> Jen Kramer: This is our HTML that we're gonna be working with.
[00:01:09] And in the CSS folder, of course, open up boxes.css. So let's take a look at our starting state HTML. As you'll see here, it's pretty simple. We're gonna just work with a basic list. We have here, I've put some classes on the <li>. You'll see why in a little while.
[00:01:28] And you'll see that this is just Lorem ipsum and I've number those so you can see what the order of these boxes are. If I go on ahead and display this in a browser, you'll see that, whoops.
>> Jen Kramer: You'll see that we have a whole bunch of boxes, isn't that exciting?
[00:01:47] Look at all those lovely boxes and then if we take a look at our CSS. I reset the font family because Times as a font annoys me on the web. Then we have our <ul> and our <li> and this is this like super simple CSS. One of the things that I have done here I have put in a little bit of margin and padding.
[00:02:11] Normally you don't necessarily do this with Flexbox. But I have done it here because I want you to see the difference between the outside dotted line. And I think I'm going to modify these, let me just modify these a little bit. I'm gonna make my border five pixels so that you can clearly see the difference on this projector as to what's going on.
[00:02:35] There we go, that's better, so the outside dotted line is the <ul>. And then the inside grey lines are the individual <li>s. This is just so you can see what's going on as we start to apply some of these Flexbox properties.