Flexbox8:21 with Nick Pettit
Looking ahead, the future of responsive grids is in flexbox. In this brief overview, we'll learn about the basics of this new collection of CSS properties and values.
We didn't use any responsive frameworks in these lessons, 0:00 but the principles we apply are similar. 0:03 Most frameworks currently use floated elements and 0:06 box sizing to make responsive calculations slightly less complex. 0:09 However, looking ahead, the future of responsive grids is in Flexbox. 0:14 I say the future because as of this recording in early 2015 Flexbox is 0:19 only supported in modern browsers. 0:24 It works in Internet Explorer 11 and it works using an older syntax in IE10. 0:27 But it does not work in versions older than that. 0:32 Of course, this will get better with time as people upgrade to newer browsers. 0:36 So its worth thinking about now. 0:41 Im going to open up a Flexbox guide from CSS tricks that will 0:43 help us understand some of the concepts here. 0:48 If you're following along you'll find a link to this page in the notes 0:51 associated with this video. 0:55 I'm also going to open a workspace associated with this video, 0:57 that includes an example. 1:01 So here I have the Complete Guide to Flexbox on CSS-Tricks. 1:03 And, if we scroll down here, and lets open up the Basics and Terminology section. 1:08 And, this chart is actually from the W3C that 1:15 sets the standard for HTML, CSS, and many other things. 1:19 And, it looks a little complicated at first, but it's not as bad as it seems. 1:24 The first thing to pay attention to here is the flex container. 1:30 So, the flex container is this entire box here. 1:34 And, the flex container will make each child element inside of it, a flex item. 1:39 And, that's what we have here. 1:47 So, what Flexbox does, is it basically makes responsive web design 1:49 easier by making the container flex to the available space. 1:54 And you'll also notice that we have this main axis and the cross axis. 2:00 We're mostly going to be paying attention to the main axis, though. 2:06 And while this is a horizontal line. 2:10 It could also end up being columns, as we'll see, in just a moment. 2:14 So we can have rows or columns for the main access. 2:18 So let's scroll down here and while that chart is helpful, 2:23 we actually used slightly different terms for the actual properties. 2:30 So that's something else that's important to understand here is that with Flexbox 2:35 you're not actually using a single CSS property or value. 2:40 It's actually a collection of properties and values. 2:44 The first one that's most important, and 2:48 probably already familiar to you, is display. 2:50 And in this case, we're going to say display flex. 2:54 And what that will do is create a context for 2:58 all of the children inside of the flex container. 3:01 So, we'll come back to here in just a moment and look at this guide some more. 3:06 But let's open up the workspace associated with this video. 3:13 Now this is a different workspace, than what we've been using previously. 3:17 And, let's take a look at the preview just to see what this looks like. 3:22 So here we have the beginnings of a marketing website. 3:25 So, I've used the Treehouse logo here and I have some navigation. 3:29 And, when we resize the browser, you'll see that we have a minor break 3:35 point there, or maybe a major break point, depending on how you wanna define it. 3:40 And then there's definitely a major break point here when we swing that 3:45 horizontal navigation down to being vertical navigation. 3:49 So, let's size this back up. 3:55 So, let's take a look at this because it's pretty different than using floats and 3:58 box sizing like we were previously. 4:02 So, I have some very basic HTML here. 4:05 There's a header and it has the class header on it. 4:10 And then, inside of that, there's two elements. 4:15 There's this h1, which is the logo. 4:17 And then there's also this navigation, 4:20 which is an unordered list, and has the class nav on it. 4:24 So let's switch back to our CSS, and see how this is working. 4:28 There's header and nav in both of these are set to display flex. 4:32 So, both the header and 4:38 the navigation nested inside of it, are Flexbox contacts. 4:42 So, if we look at main.css, again, we can see that the flex direction is column. 4:48 So, on our mobile layout, because this is mobile first, we'll size this down. 4:53 You can see that the flex direction is in a column. 4:59 So let's go back to the CSS tricks guide, and 5:04 let's look at that flex direction property. 5:09 It says this establishes the main axis, so remember, I was saying that the main 5:12 axis could be horizontal, so you could say flex direction row. 5:18 You could also reverse all of the child elements by saying row reverse, 5:23 and then same thing with a column, so you could have a column going straight down. 5:29 Or column reverse where all of the child elements will be reversed. 5:35 So in this case, we're using both of those. 5:41 We have the flex direction set to column, but then we change it, 5:44 as we go to a slightly wider layout, by switching to flex direction row. 5:49 Then, we're also using on nav the property flex. 5:54 And, that's over here in this right column, 6:00 because the left column is for parent properties, the flex container. 6:03 And the right is for the children, the flex items. 6:07 And if we go down here a little bit, we'll see that flex is actually shorthand 6:11 and that's for flex grow, shrink, and basis. 6:18 But really only the first one is required, the second, and third are optional. 6:22 So we are saying flex1, we're basically saying flex-grow1. 6:28 And if we go up to flex-grow, you can see that that is a number and 6:34 it defines the ability for a flex item to grow if necessary and 6:39 it basically serves as a proportion. 6:45 So you could have one which would be just the whole container, 6:48 in the case of having one item. 6:53 Or if you have multiple items like with our navigation, 6:56 they'll each take up an even amount of space. 6:59 So that's what we've done here. 7:02 This is actually being applied to those list items. 7:04 So, if we go back here, you can see, finally, we have justified content. 7:09 And we're saving space between for the header, and the space around for 7:13 the navigation. 7:17 And if we look at the justified content right here, 7:17 we can see space between looks like this and space around looks like this. 7:24 So basically space around will evenly space all the elements. 7:29 But, if we say space between, it will start at the beginning and 7:34 end right at the end and won't put any space between the start and the end. 7:38 This is just a quick overview of Flexbox, but 7:44 if you're ready to learn more, the notes associated with this video includes 7:47 a link to another Treehouse course where Flexbox is covered in much more detail. 7:52 In addition, 7:57 I've also included links to the Mozilla Developer Network documentation. 7:58 And the CSS Tricks Guide that we were using. 8:03 Hopefully in these lessons you've learned more about the principles behind 8:07 responsive design. 8:11 Understanding the core underpinnings of any big idea 8:13 will help you apply it to unfamiliar situations and new projects. 8:16
You need to sign up for Treehouse in order to download course files.Sign up