Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Dev Track: Putting Flexbox into Practice - Zoe Gillenwater49:43 with Zoe Gillenwater
The Flexible Box Layout module, called "flexbox"; for short, is the most fully developed and well supported of CSS3’s wide array of new techniques for creating page layouts. Web developers are itching to use it, and with good reason—flexbox allows you to create fluid, responsive layouts without having to worry about crazy percentage grid widths, negative margins, float drop, and all those pesky CSS layout quirks we’ve dealt with for over a decade. It all sounds great, but how do you actually put it to use in the real world—today? In this session, you’ll learn when to use flexbox, what the browser-specific variants are, and how to use it to build responsive multi-column page layouts without the headache. Plus, for those of us who just want to dip a toe in for now, we’ll look at some practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks.
[MUSIC]. 0:00 >> Hi everyone. My name is Zoe Mickley Gillenwater. 0:04 Zomigi on Twitter, and I'm going to 0:08 be talking about putting Flexbox into practice. 0:10 I'm a web designer and front end developer. 0:15 I wrote these two books on CSS and I am a, I'm pretty proud of these books. 0:17 I think they stand up well over time. 0:23 But I don't quite feel the same way about this website 0:26 that I created about 13 or so years ago. 0:29 It was like my first portfolio website promoting my awesome web design skills. 0:34 And, you know how the circle's cut off 0:39 on the bottom, that's because I designed it to 0:41 fit exactly 800 by 600, so it looks awful any other size except for that one size. 0:43 [LAUGH] other than that, I don't think the design's that bad. 0:49 I mean it's like flat designed, like, it was like 13 years before my time. 0:53 And it has this sweet rollover effect, 0:57 that was, like, super hard to figure out how to do, where you rolled over one image 0:59 and different image changed. But, it was laid out 1:03 with a table, sorry this is not my clicker is not working. 1:09 Okay, so all sites were laid out with a table back 1:16 then because we had no other way to create multi-column layouts. 1:19 This is a pretty gnarly table 1:22 that I created here. 1:25 Some of you probably never created table-based layouts, but, 1:26 let me just say they had a lot of weaknesses. 1:29 but, in 2003, I started a new job, and my new boss 1:33 had heard of this idea of creating layouts without tables, just with CSS. 1:37 And he wanted to try it. 1:42 And I knew about CSS for text formatting at this point, but that was about it. 1:44 So [LAUGH] 1:49 sorry, this is. 1:50 So I was pretty blown away by this idea too. 1:53 [NOISE]. 1:56 And so I definitely had to look into this too. 1:59 So I read up on it, and I learned 2:01 that table free layouts were primarily created with CSS floats. 2:02 I learned about those and by 2004 I switched over to float based layout 2:06 completely, and I got good at it, I liked it, but floats were definitely 2:10 not designed originally to create full page multi-column layouts. 2:16 So they had limitations, Things that made them difficult and frustrating sometimes. 2:20 Some of those are listed here. 2:25 You know, we have to always deal with adding classes or 2:27 coming up with hacks to make a parent contain its child float. 2:29 We're also dealing with floats or the content that follows floats, 2:33 has the potential of wrapping down if there's not enough space. 2:37 That's not always a bad thing. 2:40 It allows us to create certain types of layouts. 2:41 But as you know, sometimes it's undesirable and hard to control. 2:43 The visual location is somewhat tied to the source order since 2:47 floats only move over to one side, they don't move up. 2:50 And there's the classic complaints that you can't 2:54 center a float and, you know, separate floats cannot 2:56 you know, by default match each other in height 2:59 without again, some you know, crazy hacks and workarounds. 3:01 So there are ways to work around these problems, 3:04 we've figured out ways to get around this stuff. 3:06 But they are just complications that we have to worry about, 3:09 and fiddle with every time, instead of features that just work. 3:11 So the CSS Flexible Box layout module solves a lot of these shortcomings. 3:17 It's just called Flexbox for short. 3:22 It's one of the many layout mechanisms that's been 3:25 added to CSS in the past couple of years. 3:27 And it makes building fluid, responsive, adaptive 3:30 layouts much easier than current layout methods. 3:33 You can use it for fixed-width layouts, too, by the way. 3:35 Even though it has the name flexible in the title. 3:39 It has been a candidate recommendation since last September. 3:42 So it's quite solid, and well vetted now. 3:45 Before it became a candidate recommendation, though, 3:49 it went through a lot of changes. 3:52 And different browsers support different versions of the syntax. 3:54 It definitely can be hard to keep track of which is which. 3:57 But the display value is a great indicator, so 4:00 if you're looking at demos and tutorials online, it definitely 4:04 check that out so you can tell which version of the 4:07 syntax they're using and which browser, browsers it will thus work in. 4:10 To turn Flexbox then, you do set that display value to flex on a wrapper to make 4:14 it a flex container and indicate that you 4:22 are using this new box model on its children. 4:25 Which are now called flex items. And it's only the direct children 4:28 that are flex items, not all descendents. 4:33 So this can be limiting but you can nest flex containers. 4:37 Something can be a flex item and a flex container at the same time. 4:41 Once you've created your flex container, then you need to 4:46 specify the, flow direction of the flex items within it. 4:49 Flex items can be laid out side by side or stacked vertically. 4:54 The default is side by side running from left to right. 4:57 But you can change this using the flex-direction property. 5:00 And you set that again on the flex container. 5:03 And as you can imagine, this makes Flexbox great for 5:05 responsive web design because I can change the orientation easily 5:07 just by setting one property at different screen sizes. 5:12 To demonstrate these Flexbox properties I created 5:16 a site devoted to s'mores because they're delicious. 5:19 And I know that you don't have a computer in front of you, which is good, because 5:23 the site isn't up yet because I could not 5:27 connect [LAUGH] to the Wifi here at the hotel. 5:29 Not in my room, not down here. 5:32 So I will upload the files by tonight so that you 5:34 can spend your Saturday night looking at CSS. 5:37 Or by tomorrow. 5:39 So write down this URL, check it out later. 5:41 And so it is a demo for Flexbox you ought to view it 5:43 in a brow, browser with good Flexbox support, so preferable Chrome and Opera. 5:46 IE 10 is like almost there, there's one 5:51 little thing it's, you know, not quite matching on. 5:54 But there are a few fall backs in 5:56 there for other browsers, as we'll talk about later. 5:58 Okay, so, we'll go over the Flexbox CSS 6:08 for various parts of this site throughout the presentation 6:10 but a simple way to see how display 6:14 flex and flex-direction work is with the main nav. 6:16 I built the site mobile first, and at narrow widths. 6:19 I wanted the links to just line up in a row underneath the logo. 6:21 So I set display flex on the list nav which is the ul. 6:27 And that in turns sets 6:31 flex-direction to rows, since that's the default value. 6:33 I've written it out here, but you wouldn't necessarily write it out in your CSS. 6:36 But that makes the children li elements become flex 6:40 items and lays them out on a single horizontal line. 6:43 So here's how the main nav then looks on narrow screens. 6:48 The links wents from, went from stacked to horizontal. 6:51 And you're probably not impressed with those screen shots because 6:55 you can just do that with the display inline or 6:57 lots of other CSS. And that's totally true. 6:59 We're just laying the groundwork here. 7:01 I'm showing you how to create the flex container, but 7:04 we haven't really started manipulating the flex items within it much. 7:06 But that's what we're going to be doing. 7:10 But now that I have shown you one code sample, I ought to point out that 7:13 your CSS in the real world might look 7:18 a lot more complicated, because of these browser variants. 7:20 So this shows 7:24 two properties. 7:25 But using the 2009 syntax for Safari and Android browser which is 7:26 a 2011 syntax for IE10 the web kit prefixed version of the current 7:32 properties for Opera and the unprefixed properties for Chrome, Firefox and future 7:37 versions of the browser, browsers that are going to support the final spec. 7:42 Now, I'm not saying that I think you ought to include all of these 7:46 variants, but this is what the simple code example that I 7:50 showed earlier would look like if you chose to include everything. 7:53 And it definitely is tough to keep track of which properties and values correspond 7:59 with each other, so one tool that I like to use is called flexy Boxes. 8:03 It's a Flexbox code generator that will include the Legacy syntax if 8:07 you want it to, so it's easy to just go in there, 8:12 change your property, see the CSS that it puts 8:15 out, and see what all the equivalent versions are. 8:18 If you use Sass or LESS you can use a 8:21 Flexbox mix in to create all the variants for you or, 8:23 you know, customize it just to create the variants that 8:27 you want, if you don't want to use all of them. 8:29 And another option is the prefix-free script. 8:32 But keep in mind that it only adds prefixes to whatever syntax you write. 8:35 So you need to 8:39 manually write in the different syntaxes without their prefixes if you 8:40 want the script to then add the prefix version of those properties. 8:44 So get you part of the way there. 8:49 But if you're already using the prefix 8:50 free script for something else you can, you 8:52 know, be aware that it's going to help you out with Flexbox too, if you want. 8:54 I'm kind of undecided on whether you should use 8:59 the old syntaxes, like most things I think it 9:02 depends on the project and also which pieces 9:05 of Flexbox that you are trying to utilize. 9:07 [NOISE] 9:10 [LAUGH] 9:14 The bottom line is this, you go ahead and 9:18 use what variants you want or none of them. 9:20 But to keep the CSS that I show you here today from being 9:23 super long and hard to read I'm going to emit all the prefixed versions 9:27 from the code samples on these slides. 9:31 That doesn't mean that I'm saying that you 9:34 shouldn't use any prefixed versions in the real world. 9:35 I'm just trying to keep things simple and clear here. 9:38 But I have included, I have included most of them in the live demo 9:41 so you can check those out in the CSS if you poke around there. 9:45 So, now that that is out of the way, let's get back to talking about flex-direction. 9:49 Even though I don't have to manually 9:55 set flex-direction to row, since it is the 9:56 default value, it's important to keep in mind 9:58 what the flex-direction is, because that affects what 10:01 Flexbox calls the Main axis and the Cross axis. 10:04 So if flex-direction is set to row my flex items flow horizontally, that 10:07 means that's the Main axis and that means width is the main dimension. 10:13 That means vertical's the cross axis, and height is the cross dimension. 10:17 If 10:21 I had set flex-direction to column, this would all be reversed. 10:21 And these axes are important because they affect 10:25 all of the Flexbox properties that will come later. 10:27 Flexbox is so flexible because its properties can make 10:30 items A line and layout in any direction, but it 10:33 basically needs to know at what point to start from 10:37 and then more out from and which direction its moving. 10:40 [COUGH] 10:42 So it also needs to know whether to lay out 10:45 the flex items on a single line, which is the default, or to 10:47 wrap them to multiple lines and this is controlled with the flex wrap property. 10:51 It also controls which direction the new lines are stacked 10:55 in, if you do choose to wrap, so for row, I 10:58 can have rows stacked top to bottom, but I could 11:01 also have them come from the bottom up to the top. 11:04 And for column, I can have them come from left to right, or right to left. 11:07 So this property sets that. 11:10 Flex-wrap is extremely useful but the major problem 11:15 with it is that Firefox doesn't support it. 11:18 So Firefox uses the non-prefixed versions of the properties. 11:20 But for some reason they haven't added flex-wrap yet. 11:24 It doesn't support the old box lines property either. 11:28 So you can't feed it anything to work around that lack of support. 11:30 In fact, no browser ever supported box-line so if you're 11:34 using the 2009 syntax for the benefit of Safari and Android, 11:36 you won't be able to get items to wrap. 11:40 Another issue that you may run across is 11:44 that you, you have some control, but not complete 11:47 iron-clad control over where The breaks occur without having 11:50 support for the break before and break after properties. 11:55 Those aren't part of the Flexbox spec. 11:59 They're a different CSS module, but they can 12:01 be used in conjunction with Flexbox, and they 12:03 would be really handy to use in conjunction with Flexbox. 12:06 Right now, only IE10 and Opera support them. 12:09 So, I'm still going to show you how to use flex-wrap because it is so essential. 12:12 but, really the lack of Firefox support is kinda the sticking 12:18 point right now, so you probably can't use it just yet. 12:20 But flex-wrap is basically the third piece of what 12:24 we need to set the stage when firing up flex-box. 12:28 So, you create your flex container by setting display to flex. 12:31 You set flex-direction to control the flow, the orientation 12:34 of the items within it, either horizontal or vertical. 12:38 Set flex-wrap to whether those items can wrap and in which direction they wrap. 12:42 There's also a short-hand property 12:47 called flex-flow for flex-direction and flex-wrap. 12:49 [COUGH] And so let's start digging into how 12:52 we use these properties on the s'mores site 12:54 (no period) There's not much need for 12:56 Flexbox at the you know, default mobile first 12:58 styles because black layout just kick, takes 13:01 care of stacking everything into a single column. 13:03 But when the page is whiter there're two main sections that need layout. 13:07 There's the builder form containing for. 13:12 Component boxes. And an action box at the bottom. 13:15 And then there's the gallery of s'mores combinations. 13:19 That contains a bunch of gallery item boxes. 13:22 So these are the classes that your going to see me using. 13:25 So as the view port gets wider I want to start taking advantage 13:33 of the extra space by having some of these items sit side by side. 13:36 So I'll add Flexbox to handle this. 13:41 And I don't actually have to put this in the media query. 13:43 I just put it in the default styles outside of the 13:46 media query and it just basically kicks in whenever space allows. 13:48 So it is kind of like the browser 13:52 is figuring out content driven break points for you. 13:53 So here is the CSS that creates 13:57 the flex container for the gallery section and then 13:58 for the children flex items, those dark brown boxes. 14:03 I don't need to set explicit widths on them. 14:06 But instead use the flex property to specify a proportional 14:09 size and let them resize to fit the space available. 14:13 So this property is one of the foundations of Flexbox. 14:17 It's a big part of what makes Flexbox so powerful but it also 14:20 can be difficult to Fully correctly at first. 14:24 So, let's break it down. 14:28 The flex property is set on flex items, not on the container. 14:31 And it affects either those items' width or their 14:34 height, whichever is the main dimension along the main axis. 14:36 Our gallery items are horizontal, so flex will affect their width. 14:40 And there are three components to the flex value, it's a shorthand property, 14:45 flex-grow, flex-shrink and flex-basis. Flex-grow means how much the 14:49 flex item will grow relative to the other items if there's extra space available. 14:56 Or you can think of it as the portion or number of shares of the extra space that 15:02 it gets Flex-shrink means how much the item will 15:06 shrink relative to others if there's not enough space. 15:09 So it's the proportion of 15:13 those overflowing pixels that it will have to have shaved 15:14 off of it in order to get everything to fit. 15:17 And then flex-basis is the initial starting dimension. 15:19 Before the free space is added on or taken away from the item. 15:24 And you can set flex-basis to anything that 15:28 you would set width or height to, including Auto. 15:30 [INAUDIBLE] 15:32 >> Yes, 15:37 the default, I believe is, well it, it, flex-basis definitely defaults to Auto. 15:39 And flex grow, I think, defaults to one, 15:46 and I can't remember what flex shrink defaults to. 15:49 Do you know? One. 15:51 All right, one, one, auto is the default. Thank you. 15:54 [LAUGH] All right, so, for the gallery item flex 15:57 value, I set flex grow to one, because I want 16:01 all of the items to get one share of the extra width. 16:04 Setting flex shrink to zero means that I don't want 16:09 them to ever shrink at all if they can't all fit. 16:10 But, it's kind of redundant because flex wrap won't 16:13 let the item shrink anyway, because once there's not 16:17 enough room to fit them all on a line it will just wrap them to a new line. 16:20 So that basically means that flex basis here becomes our main width. 16:24 So each 16:29 item will start out at 200 pixels. 16:29 The browser will put in as many of those 200 pixel boxes as it can on a line. 16:31 Then it will wrap, and then it will take each of 16:35 those boxes and expand them to fill the line, if needed. 16:37 So they'll always be at least 200 pixels wide. 16:41 >> How much is the one share for flex-direction. 16:44 >> Sorry, what was that? 16:49 >> How much is the Well it's basically like, it's just a proportion so it depends 16:49 how many other items there are. 16:54 So if the browser has how ever many numbers of pixels at the end. 16:56 It has to see how many items there are. 17:00 And if they all have one, they, then they all get one share. 17:02 So it's like it's dealing out cards. 17:05 And it says one for you, one for you, one for you. 17:07 One for you, one for you, one for you. 17:10 If one of them is set to two it goes one for you, one for you, two for you. 17:11 One for you, one for you, two for you, so it's, it's all just it's just a ratio 17:15 basically so you can set flex grow or flex 17:19 shrink to any, you know, number, just a digit. 17:22 And you can kind of think of it like, grid units, in a framework. 17:25 So just like you might set this one thing to 17:30 span three and this other thing to span two, that would 17:33 just be the same as this gets You know, three 17:35 shares whereas this thing only gets two shares of extra space. 17:38 Does that make sense? Yeah. 17:41 So Flex 17:44 is one of those things that you just have to see 17:46 live so let's switch to Chrome now to take a look. 17:48 okay. All right. 17:56 So here are my gallery items. 17:58 They are, they do have Flexbox going on right now, but I can't fit two 18:00 of them to a row yet, so they're 18:04 just stacking, and they're filling up the space. 18:07 It's not showing? 18:10 Mm, thank you. 18:12 There. Okay. 18:15 Okay, all right. So there they are. 18:19 I could come up with s'mores combinations all day you guys. 18:22 It was hard to limit myself to twelve on this page. 18:25 Okay, so, so this is how, how it looks at, you know, a narrow size. 18:28 And I expand, and they get bigger, and then they will 18:34 jump up because now there is room to fit two of the 18:37 200 pixel wide boxes on one line. 18:40 So this, you know, again this isn't in a media query. 18:43 This just happened. 18:46 I didn't have to say okay, now in this media query I want them to 50% wide. 18:47 and, it just keeps changing as I expand. 18:52 So, it's kind of similar to if you have a 18:56 gallery of items where the items are set to display 18:58 in line block, you know and then they will just 19:01 wrap to how, however many will fit on a line. 19:03 But here, they're expanding to fill the whole 19:05 line, as oppose to when you use inline block. 19:07 They just have set width and so there'll be a gap at the end until finally there's 19:10 room for another one to jump up into the gap, so we don't have that going on here. 19:14 They're always filling the, the entire width. 19:17 So, back to here. 19:21 Now when you're dealing, when you're reading about Flexbox, it's really common 19:33 to see a single digit used in, you know, demos and tutorials. 19:36 Yeah. 19:40 Is the height expanding to the area or are, is the height static? 19:40 >> Ooh, that's a preview for what's coming up. 19:46 The height is not set. 19:47 They're all just equal height. Isn't that just amazing? 19:49 We will talk about that. >> [LAUGH] Alright. 19:51 Alright. Good eye. 19:57 Alright. 19:59 So, It's fine to use a single digit as your flex value. 20:00 But you need to know that digit becomes the 20:05 flex grow value, so if you leave off flex 20:07 shrink, it gets set to one, and when you 20:11 leave off flex basis, it gets set to zero pixels. 20:14 So it doesn't get set to auto, which is the default value. 20:18 It gets set to zero pixels if you leave it off. 20:20 So be careful with this because you may not want flex spaces to be zero. 20:23 Because remember when wrap is on, flex 20:28 spaces basically becomes min width, so you are 20:30 saying I'm totally fine with these items getting all the way down to zero pixels. 20:32 And if everything can get down to zero 20:37 pixels than nothing ever has a reason to wrap. 20:38 I learned this the hard way when I was 20:43 trying to lay out the builder's section of the page. 20:45 Shown here as I wanted it to appear. 20:49 And I eventually did get it to appear. 20:51 [LAUGH] So the four tan boxes, again, have that component class on them. 20:53 The action, class is for that bar below with the 20:57 field, where you name your s'mores and your button And 21:00 my thought process went like this: I want all four 21:03 components to always be the same width, so I'll set 21:05 flex to one for each. They all get one share. 21:08 And then to force the action section down to a 21:11 new line, I will give it flex basis of 100%. 21:13 Because if it's 100% wide it won't fit with anything 21:17 so it will have to wrap to a second line. 21:20 Perfect. And then, this is what I ended up with. 21:22 Everything was overlapping and all squished together, I 21:26 was totally baffled, angry comments were written into 21:30 the CSS during this period, 21:34 But what was happening that I eventually figured out, was that by 21:37 setting flex to one, I was inadvertently setting flex basis to zero. 21:40 And that allowed all four components to shrink down to zero pixels wide. 21:46 Because this was the skeleton version of the page before I added padding 21:51 border margin, they had nothing else to get them any sort of dimension. 21:55 So if they take up literally no space, then it's perfectly 21:59 fine for a 100% wide box to sit on the 22:02 same line with them, and that is exactly what happened. 22:05 I had the same problem with the gallery section initially as well. 22:09 Before I set flex spaces to 200 pixels on those boxes, they all just stay 22:13 on the same line and I just kept shrinking my browser expecting them to wrap. 22:17 And you know, I thought they would wrap when they hit the longest word, but 22:21 they just let that content overflow and just kept on going down to zero pixels. 22:24 So, you know, unlike with floats, like, if you say 22:28 don't wrap, Flexbox is not gonna let your stuff wrap. 22:31 And that's good as long as you want 22:35 that to happen and understand why it's happening. 22:38 So, but changing flex basis to 200 pixels, that meant 22:40 that, that the components would start out at that width. 22:44 Em, so when the browser would go to add 22:47 that 100% wide item, it wouldn't have room to 22:49 fit that on the line with the component ever, 22:52 so it would always wrap onto its own line. 22:55 So let's look at that builder section of the page in Chrome now. 23:00 [SOUND]. 23:04 Okay, so, here's the builder's section. And I have my four boxes just stacked. 23:15 And then I widen it, and then they have room. 23:26 It's kind of 23:29 Resolution's off. But, so they have room to sit two by two. 23:32 So they do that. 23:37 And then if I widen, they have room to sit three to a line and then one below. 23:39 And I was fine with this, because really, these three are like the 23:43 essential, classic s'mores components, whereas this is 23:46 like ooh, extra, make your s'mores fancy. 23:49 So I was fine with that. 23:52 Like being visually separated out. 23:53 So I didn't, you know, create something in a media query to prevent 23:54 this from happening. I liked this layout that I got here. 23:57 And then if I get wider then they sit all four to a line. 24:00 And I have my action bar always spanning 100% wide, always underneath. 24:05 so, any questions about, flexing at this point? 24:11 Yeah. 24:15 >> Case for the accessories box being full lit? 24:15 >> Uh-huh. 24:19 >> You'd have to do a separate media query to, 24:20 if you wanted to constrain that to max width or something like that? 24:22 >> Yeah, yeah. 24:26 If I didn't, yeah, if I didn't like what it was happening there, then yeah, I 24:26 would have to, do something in the media 24:29 query to choose what else I wanted to happen. 24:31 I could set different yeah, flex values or I might 24:34 set, you know, and actual max width like you said. 24:38 You can combine regular widths with flex. 24:41 You can combine min width and max width with flex. 24:44 You can set both of 24:46 those things. 24:47 But often you don't need to set anything, other than just the flex property. 24:48 >> Would the flex grow and shrink require you to be a integer? 24:52 Mm-hm [INAUDIBLE] I think they're required to be in integer. 24:55 I'm going to look at you again. 24:59 Oh yeah sorry I should repeat the question too. 25:04 [LAUGH] 25:06 >> I'm pretty sure you can use decimals. 25:06 >> You can use decimals? 25:08 Alright, that's cool. Alright anything else. 25:10 Okay. Alright so being able to 25:13 use flex has a lot of advantages 25:21 over having to set an explicit width or height. 25:29 You've already seen how dramatically the layout can change 25:32 without having to create different versions within multiple media carriers. 25:34 So again here are the four different media layouts. 25:38 That the builders section goes through, and they are all created with just a few 25:41 lines of the same CSS sitting outside of the default of the first media query. 25:43 So you don't have to figure out where to put 25:49 the break points and what crazy percentage to give them within 25:51 each of those media queries, the browser figures all that out for you. 25:54 You will still need to use media queries and I 25:58 still love media queries, but any time you can automate things. 25:59 And keep your CSS simpler, that's always good. 26:03 Flex also adjusts widths to accommodate merchants. 26:07 So, box-sizing is, you know, frequently used nowadays to take care 26:10 of padding and borders, but it doesn't do anything about margin. 26:15 So if I was to try to make all four 26:18 components, each 25% wide and give them 20 pixels of margin. 26:21 They were not fit. 26:25 The margins added on, but with Flex, the margin 26:26 is accounted for, and calculating how much space is available. 26:29 So all four components can fit on a line. 26:33 The browser will also make them fit, if I was to add more 26:39 or take some away, into the HTML without me having to adjust the CSS. 26:42 So, this makes Flexbox really useful on sites where The 26:47 number of content blocks beside each other changes frequently because of, 26:51 you know, dynamic user entered content or just because in 26:56 different sections of the site you're putting different numbers of items. 27:00 So maybe 27:04 on your homepage you have three feature 27:04 boxes that you wanna highlight for your widget. 27:06 And then within the feature section you have five. 27:09 And then a month from now your boss wants to add a 6th one. 27:12 So I can do all of that without having to change any CSS. 27:15 I don't have to change any class names when they're in different sections. 27:19 Flexbox just makes everything fit automatically. 27:23 So it makes your CSS and your HTML a lot more modular. 27:25 I can move items 27:28 anywhere and have them just adjust in size. 27:29 And flex is great to use in hybrid layouts 27:34 where your using different units of measurement across a line. 27:36 Like here I want the text field to stretch 27:40 to take up the remaining width of its line. 27:42 But I have no idea what width value to give 27:45 it because the content before it Is it has widths in 27:47 the mix of ems and pixels, and then the parent 27:52 box that it's in is some changing percentage of the page. 27:55 [SOUND] So using Flexbox I simply used the flex property to tell the 27:58 text input to, it's called other name, to take up all the remaining space. 28:04 The radio button and the label are flex items 28:10 too but since I don't set them to flex 28:13 they just stay at their default, you know, pixel 28:15 or text space size and only the text input flexes. 28:18 So if that parent 28:22 component box is narrow or wide it just takes 28:23 up whatever width to fill the rest of the line. 28:26 Another really cool thing about Flex is that it 28:31 can make siblings have sizes relative to each other. 28:33 So if i set the two blue boxes to flex one. 28:37 The red box to flex two. 28:40 The flex two box will be twice as wide as the others. 28:42 So the browser first allocates pixels to padding and margins. 28:46 Then it sees how many are left for Flex. 28:50 And it gives two pixels to the Flex 2 box for every one pixel that it gives to each 28:53 of the other Flex 1 boxes. 28:57 So again, this is kinda like, you know, grid units. 28:59 Where I'm saying, I want this to be two grid units wide. 29:02 I want this one to be one, this one to be one. 29:04 But here, you know, the browser's figuring out 29:08 my grid units for me and calculating all that. 29:10 But, again, you have to be careful with this because 29:14 it only works as you expect a flex-basis is zero, 29:17 as it is when you're using single-digit flex values. 29:22 This is because if all the boxes start out at 29:26 zero pixels Then all the space on the line is extra. 29:28 And so the flex two item gets twice as much of that extra. 29:31 And it's added on to zero, so it's gonna be twice as wide as the other two boxes. 29:34 If flex spaces isn't zero, the flex two item will 29:39 not necessarily be twice the width of the flex one box. 29:42 So the browser 29:47 will still give it two pixels for every 29:47 one pixel that it gives to the other boxes. 29:49 But it's adding that on to starting widths. 29:51 So here, if I have 50 pixels in the line, and I had the flex basis set to 10. 29:54 So they're gonna take up 30 pixels just right off the bat. 29:59 That leaves only 20 extra. 30:03 So it's gonna give five extra to the flex one, five 30:05 extra to the flex one and ten extra to the flex two. 30:09 That makes my flex 30:12 two box be 20 pixels. 30:12 The other two are 15 pixels and 20 pixels is not twice 15 pixels. 30:14 That's science. Okay. 30:19 [LAUGH] Yes. >> [INAUDIBLE] [INAUDIBLE] 30:20 would it work if we set the initial width of the 30:26 right-most box to be twice as wide as the other two? 30:30 >> Yes. >> If it was 10, 10 and 20? 30:33 >> Yes. 30:35 >> Then they stay equal proportion? >> Yes. 30:35 It 30:37 would. 30:38 But you know, in some cases, that might defeat 30:39 the whole purpose of being able to set proportional sizes. 30:41 But if you are thinking of it like a min width, then yes, 30:43 you could set Set its min, you know its flex basis, to be twice 30:46 the flex basis of the others and then that would work out. 30:52 So that's why I said, if flex basis 30:54 isn't zero, it won't necessarily be twice as wide. 30:56 It might be twice as wide, but you just have to keep that 30:58 in mind, that it's not going to magically always be twice as wide. 31:01 I learned this the hard way as well. [LAUGH] 31:06 So again this is not a knock on flex it's just one of those details about 31:10 it that often gets left out of online 31:13 tutorials, and because I struggled with it I wanted 31:15 to share it with all of you. 31:17 [LAUGH] So flex is still awesome I just didn't want 31:19 that little detail about how it works to trip you up. 31:21 Okay. 31:29 So, that gives you a taste of how Flexbox can be used to create entire page layouts. 31:30 But with browser support where it's at, you probably don't want 31:36 to use it to create an entire page layout just yet. 31:39 However, you could use it in smaller ways as progressive enhancement. 31:42 So lemme show you a few examples where Flexbox could be used on components 31:46 of a page rather than the whole 31:50 page layout in a way where non-supporting browsers 31:52 still get an acceptable fall back experience. 31:55 So sometimes you'll have a simple form with only one 31:58 or two fields in it that you want to put everything 32:01 on a single line and have it stretched to a full 32:04 width with all the items either vertically centered Or equal height. 32:06 You'll see this sometimes for site search or log in forms, as shown here. 32:10 Maybe also a email subscription form or just a product listing bar in an, you know 32:15 an order form. 32:20 On the s'mores site I wanted to use this layout for the action section. 32:21 Which you've, you've already seen how that ended up. 32:25 Without Flexbox, of course, I could just set the items to be 32:30 inline or inline block that, and use vertical line to get everything centered. 32:33 but, of course, that doesn't make the text input stretch to fill up the line. 32:38 With Flexbox, I just set the input 32:43 to flex and I leave the label and 32:45 the button at their default, text determined widths. 32:47 And then the input will take up what ever space is left. 32:49 A nice bonus to creating the flex container is that all of the items, the 32:54 label, the button, and the the input will stretch to the height of the tallest one. 32:58 Which is the button in this case. 33:03 And this is due to the align items property being set 33:07 to stretch by default on flex container. So the align I, items. 33:10 sorry. 33:16 The line items property again is set on the flex container, 33:16 and it aligns all of the flex items in the cross axis. 33:20 So here, my items are horizontal, so the cross axis is 33:23 vertical, so that means here it's going to affect their vertical alignment. 33:28 So finally, equal height columns and vertical 33:32 centering which were two of the most stupidly hard 33:35 things to do with CSS are now super easy. 33:38 You just set them with a property, which is how it should be. 33:42 So, here's how the action section then looks 33:46 with the input flexing to fill the line. 33:48 So I've completed all of my criteria here. 33:51 But it does look kind of weird to have 33:55 the label be stretching in height to match the input 33:56 in the button. 34:00 so, all I gotta do is set align-self to center on 34:02 that label, and that basically overrides its align items value of stretch. 34:06 And that means it will be vertically centered while 34:13 the other two items will still stay equal height. 34:15 So the align-self property has all the same values as the line 34:17 items its just that you set it on individual flex items but align 34:21 items you set on the container and it effect 34:25 all the flex items at once, as a group. 34:27 So now you have align items and you 34:30 have align-self, you have total control over alignment now. 34:31 And that is the line items is how I got the gallery items boxes to all 34:36 be the same height, it's how I got all those component boxes to the same height. 34:40 I didn't actually even set it. It just was there by default. 34:44 So for non supporting browsers, the forum can fall back to the appearance. 34:49 Where everything's on one line but not full width as we saw earlier. 34:54 Just by adding that text align center to the action wrapper. 34:57 This won't have any effect on 35:01 Flexbox supporting browsers, because they're stretching to 35:03 fill the line, but I don't have to hide it from them either. 35:05 They just coexist peacefully. 35:07 On narrow screens a different fallback approach 35:11 might be to stack and horizontally center. 35:13 The items. 35:16 And then add a few Flexbox properties 35:17 to enhance the appearance in supporting browsers. 35:19 So notice, here, that I have the input set to display block, and width, 100%. 35:22 So that, in non supporting browsers, it'll go onto 35:26 its own line, fill the width of the line. 35:29 But I have it set to flex one, so that, 35:30 on flex blocks browsers, it can flex to fit next 35:34 to the label. So this is what it looks like. 35:37 So, again, the inputs on its own line but in the Flexbox version 35:41 it's next to the label and those are, you know, seemingly conflicting chunks 35:45 of CSS but they are living together harmoniously because the flex is just 35:50 overriding the other one and browsers that don't understand flex just ignore it. 35:54 Yeah? >> Does that override just 35:59 because flex wins? 36:02 Or I, I, I don't remember from the 36:04 previous slide, was flex above it in the CSS 36:06 or was flex below it in the CSS or 36:09 it won because it was after the previous declaration? 36:11 >> it, no, it's so, it 36:16 It wins just because I'm telling it. 36:20 Again, I set it to flex one so I'm saying, "You can get down to zero pixels." 36:23 So even though it might start out at 100 percent 36:28 pixels, it's wanting to adjust to fit next to other stuff. 36:30 And I haven't told it not to do that. 36:34 So it wants to sit next to other stuff. 36:36 And I'm letting it get down, all the way to zero pixels if need be. 36:38 Right? 36:42 But it doesn't need to get to that point, cuz the label's not that big. 36:42 So it's, even though I have it set to 36:45 width 100%, it's able to still sit beside something else. 36:47 Because it's able to flex and shrink to fit. 36:51 Does that make sense? 36:54 >> Yeah. >> Yeah. 36:55 So much of the time you can have your Flexbox 37:00 and your fallback styles you know, together like this, but occasionally 37:03 they will conflict and you'll only want to show something when 37:08 Flexbox is in effect or, you know, when it's not there. 37:10 So the Modernizr script is perfect for this. 37:13 In the case of the action section, there was only one tiny piece that I 37:17 needed to hide from non-Flexbox browsers and that 37:21 was just the white margin on the label. 37:23 It only made sense to have that there if the label was next to the input. 37:26 It would screw up the horizontal centering appearance of 37:30 it, it, when the label's on its own line. 37:32 So that was the only thing that I hid from non-Flexbox browsers. 37:35 >> Have they updated the Mondernizr script to recognize the new syntax? 37:39 >> Yes. 37:44 Yeah, so it will recognize either no flexbox, or old flexbox, or 37:45 current flexbox. Yeah, yeah. 37:51 Okay. 37:57 Okay I'm running out of time, but. 38:00 A similar design challenge to the full width form then, 38:02 is a full width nav bar but here I don't want 38:05 the items to stretch, I just want them to distribute themselves 38:07 along the lines so that, altogether they span the full width. 38:11 That's the sort of thing that's really easy to do in Photoshop, right? 38:15 Send items to the edges, equally distributed spaces, 38:18 but it's not easy to do on a website. 38:20 So using display table cell 38:24 will get you the full width, but not equal spaces. 38:25 But if I make the li items into flex items, but I don't set them to flex, 38:28 so stay at the width of their text, 38:34 Then I can set justified content to space between. 38:36 And that moves the first and the last to the edges and 38:40 then equally distributed the spaces that is, that are left in between items. 38:43 So it aligns flex items along 38:48 the main axis, which in this case, is horizontal. 38:50 And flex start is the default value here. 38:55 [COUGH] I can use both inline-block and Flexbox together. 38:57 Again so that in non Flexbox browsers, it will juh, the nav will 39:04 be centered and then in flex box browsers it will span the full width. 39:08 And again, I'm not hiding anything here using modernizer classes, 39:12 there's no need. 39:15 So here's how the nav looks on medium width screens. 39:17 Now if your links happen to all be about the same number of characters you 39:20 might be able to get away with 39:25 using display table cell as your fallback method. 39:26 Here my links aren't all the same number of characters, 39:30 but they kind of mirror each other, so that works too. 39:33 I have my two short links and then my two long links. 39:34 So the display table cell 39:38 will make the nav full width. 39:40 It doesn't actually do equal spaces because the space of 39:42 each cell is proportional to the content of the cell. 39:46 So bigger link means bigger padding in the cell. 39:48 Means bigger gaps between, before, you know, around bigger links. 39:51 But if your links are all around the same size it 39:55 will look like the spaces are all about he same size. 39:56 So you know try it. 40:00 It might be like so close as to like be, oh not just there and like your designer 40:01 self will be hating it, but it might work in some situations. 40:06 And so another thing I wanted to point out 40:10 here is I have display table and display flex 40:12 both set On the list nav I don't need 40:15 to hide them because display flex just overrides display table. 40:17 If the browser doesn't understand that, 40:21 just ignores it, sticks with display table. 40:23 A variation on that full width nav bar is my pagination, 40:27 again, because I could create pages and pages of s'mores combinations. 40:31 Mine looked to stretched out, on really wide screens so I set justify 40:35 content to center, just to keep it vertic, you know centered, horizontally centered. 40:39 But on the medium view, I used justify content 40:44 space-between to again keep it full width with equal spaces. 40:47 On narrow screens, 40:51 I can keep it full width, but it would be cool 40:52 to move the next link up onto a line with the 40:55 previous link, and, but you know, not change the HTML so 40:57 the next link would still be the last item in the list. 41:01 And I can use Flexbox to do this. 41:04 I just set the order property On the flex items to specify the order 41:08 that I want the browser to lay them out in regardless of the html. 41:12 So the browser runs from lowest numbers, 41:16 which can be negative numbers as well, to the highest, so the 41:18 previous link, is first, with its value of order zero, then the next 41:22 link is next with its value of order one, and then all 41:27 the rest of the links have order two, so they all come Next. 41:31 So this moves the next link right after previous, the previous link, visually. 41:35 But we haven't done anything to create a new row. 41:39 To force a new row after 41:42 that next link. 41:43 So to do that I turn on flex wrap on the flex container. 41:45 And then I make the previous and next links 41:49 each 50% wide so together they take up 100%. 41:52 Of the line, and that forces the rest of the links down below them. 41:56 And this ability to arrange content visually in a different order than 42:04 it appears in the HTML has accessibility implications, both good and bad. 42:07 You know, in some cases you can use it To create a more logical semantic ordering of 42:13 your HTML instead of structuring your HTML just to achieve some particular layout. 42:20 On the other hand, it can make the tab 42:25 order not match up with what you see visually, 42:27 because the tab order depends on the HTML order, The 42:31 tab order doesn't change, even though I've moved things visually. 42:35 In this I don't think it's going to 42:38 be disorienting, because the one like is right under 42:40 the previous link, so having the tab order move 42:43 down to it I don't think would be disorienting. 42:45 But just keep that in mind, that if you go 42:48 crazy with the order property it may create accessibility problems. 42:51 I have found though that you can't really use 42:57 the order property for really extensive reordering, because it 42:58 can only re, reorder sibling elements for instance, but 43:03 it is a nice useful feature for smaller, layout shifts. 43:06 so, I have one final Flexbox progressing enhancement example, I 43:12 know we're out of time I'm just gonna keep going. 43:15 Alright, [LAUGH] so pinning items to the bottom of equal height boxes. 43:18 You see this a lot in like, pricing and 43:22 planning comparison boxes, you may also see it in galleries. 43:23 I wanted to use this effect on the other fields at the bottom, of the 43:28 component boxes, and that's dependent on those 43:31 component boxes being equal height with each other. 43:35 And also dependent on the fact that the Flexbox, if 43:39 I set a margin in the main axis to auto. 43:42 Then it will take up all the free space left. 43:45 So, if I wanted to pin something to the bottom 43:48 of this flex container, I would set the flex-direction to column. 43:50 So that its items could stretch to fill up its 43:53 height And then the item that I would want to 43:55 push down I'd give it margin top of auto and 43:57 that would take up all the rest of the space. 43:59 So here's how I do that with the other fields. 44:03 First I gotta make sure that each of those component boxes are equal height. 44:05 I do that with align items stretch on their parent. 44:09 Now, only do the component boxes all need to 44:14 be equal height with the ul within each component 44:16 box, all need to be equal height. So I set them to all flex one. 44:18 I set the, the flex-direction to column so stuff can 44:24 stretch to fill height instead of stretching to fill width. 44:26 Set the ul to flex one. 44:29 So it's gonna stretch to fill the whole height. 44:31 Height 100% would not work here because 44:33 the component box has no explicit height set. 44:35 But flex one will work to stretch to full height. 44:37 And then I make the ul into a flex 44:43 container as well and set it to flex-direction column 44:45 so it's li elements will stack vertically, and I 44:47 can use this new auto margin behavior on those li. 44:51 And the last li is what I give margin top auto to. 44:56 So that effectively pushes it all the way to the bottom. 44:59 Because all the extra space in that ul gets put as its margin top. 45:01 So again we're out of time so I won't walk you through. 45:08 But you could create a similar effect with absolute positioning. 45:12 It just wouldn't be as robust because you know, 45:17 things have the potential to over, overlap with absolute positioning. 45:19 You have to hard coat a padding value for that stuff to sit. 45:22 Within, so it would look the same but it's not as robust as the Flexbox version. 45:25 And I use this same effect on the wide view of the nav. 45:31 I gave margin left auto to the third link, the throw a party link, 45:36 so that basically took all the extra space on the line, put it to 45:40 the left side of the throw a party link, which meant that the throw 45:43 a party link and everything that came over it, got pushed to the right side. 45:46 So you know, most people would cheat and break this into two lists. 45:50 Which is not awful but it's less accessible, 45:55 less robust. 45:57 So it's now just, you know, one list and I 45:57 just can use margins to push things to different sides. 46:00 okay. 46:05 So hopefully you are thinking this is cool and you want to try it out. 46:06 But, some of you might be thinking, okay. 46:12 I can do this but why would I want to do it? 46:15 I think that you should start using Flexbox now. 46:20 For one thing it's going to be an essential lay out to 46:24 tool in the future, especially as responsive web design kind of becomes the 46:27 de facto thing you know That we all need to know in our careers as web 46:31 designers and so there's less pressure and more chance of success if 46:35 you learn it before you have to use it in live project rather than during. 46:41 I already told you about when I first learned about CSS layouts, but 46:47 before that - Was when I intro-, was introduced to CSS just as 46:51 a thing, and for some reason I, I have a definite 46:56 memory of that and this is a nearly verbatim quotation of 46:59 one of the things I said to the person who was 47:03 trying to convince me that CSS was the next big thing. 47:05 So I have a definite memory of defending the font tags. 47:08 [LAUGH] - This seemed like a perfectly logical viewpoint, at the time. 47:11 And it actually had some validity to it. This seems like a perfectly viewpoint now. 47:16 And it definitely has validity to it. I won't deny it. 47:22 But at some point, our ever-changing industry 47:25 forces us to stop asking this question. 47:28 And instead, start using this, this new technique or new technology, because 47:31 it's no longer really new and it's now become standard and expected. 47:36 But just like with learning CSS, or 47:39 floats, or responsive web design, or any of 47:41 these other big shifts, the pain was less if you took the time to learn 47:43 it when it was still somewhat new and gave yourself time to experiment with it. 47:47 The best way to learn Flexbox of course is to use it hands-on. 47:54 I've already told you how at times when I've learned a 47:58 lot more about Flexbox by building the demo page for this site. 48:01 And using Flexbox for small cosmetic enhancements may seem trivial. 48:06 But it's actually a really low-risk way to try it, to get familiar with the 48:10 syntax, to get comfortable with it And 48:14 just see how it works in different browsers. 48:16 And finally I think you should start using Flexbox because it's fun. 48:20 You can read lots of UX articles about how we should 48:26 be giving our users little moments of pleasure through our work. 48:29 But what about giving ourselves little moments of pleasure through our work? 48:31 There's no reason why we can't do both. 48:35 And we should enjoy our jobs to get better at our jobs. 48:37 It may take a little bit longer to add on 48:40 flesbox's progressive enhancement but if it's a fun challenge and 48:42 rewarding to see at the end, then it's worth it. 48:46 So every once in a while, forget the rule that 48:49 you only add something to the site if the browser metrics. 48:52 ROI, user test continuum, AB results, analytics, whatever. 48:55 Say that it's worthwhile. 49:00 And instead, add a piece of CSS because you 49:02 think it's awesome, and you'll have fun writing it. 49:05 I had fun creating this presentation for you guys. 49:08 and, if you want to download it, and get links to related resources 49:12 I will have it up on my blog [LAUGH] hopefully tonight, maybe tomorrow. 49:16 But here also is my contact information. 49:21 I don't think we have time for questions, but please 49:25 talk to me, send me an email, tweet at me, whatever. 49:28 I do have some s'mores though. 49:32 So if you ask me a good question I can give you a s'more candy. 49:33 So please do talk to me. 49:37 [NOISE] 49:39
You need to sign up for Treehouse in order to download course files.Sign up