 Hey everybody, my name is Greg. I work at Voku where I do JavaScript and HTML5 training and today I'd like to talk to you a little bit about Flexbox. A little while ago I wrote this very long very technical and detailed article about Flexbox That's probably the best resource if you want to really understand it inside and out but I want to show you today just a little bit about you know the concepts and the high level what can do for you and This how does it work? So if you're not familiar with Flexbox It's a new layout mode of the CSS3. It makes it easier to make complicated layouts for applications CSS originally was just for little documents. It wasn't really designed for the really Responsive flexible grid cool stuff we're doing today so Here we have an example of something that's really easy with Flexbox that might be a little tricky using traditional techniques This content really has no special markup No special CSS. There's one property being used here Each of these rows is in a flex container and that container has the property display flex and As you see it is very flexible the content is what's determining how these things are being displayed You're probably looking at this thinking. Oh, I could do this with tables But you know how tables are they're too much markup and they can be a little difficult to style at times And you might say oh, I can do this with percent But in that case if your content change you'd have to change your style sheets And that's just annoying to maintain especially if somebody is maintaining it that isn't the You know someone's writing content somebody else's writing CSS Here's another example that shows that Flexbox is concerned with what to do with free space. This window is pretty big right now. So these three columns Have the property flex one which means the ratio is one to one to one of the free space What happens if we shrink them down? But here it's small enough that you can see The ratio is now something else that we don't really have extra space So Flexbox determined that this pink column needed more space than these ones just because of the size of the content If you're going to do this exact thing with traditional techniques You probably would need to use media queries and have different styles depending on the browser size or something really Convoluted like that and once again if your content changed your style sheets would have to change Here's another example. This is a little widget. I made you probably wouldn't do something Exactly like this in a real website, but you would use these techniques The thing that's difty here is that you know once again, it's flexible and it's called Flexbox But the cool part is that these collapse columns have a fixed width of 1 a.m. because you know, that's the font height and This expanded black element doesn't have a width set. It's just automatically getting the rest of the space in the Flexbox mixing Flexible and inflexible elements is kind of tricky. You can't have fixed widths and percents It's mixed together as you may have found in the past It's the kind of thing that people often falls back on using JavaScript for and using JavaScript for layout. Is this the nightmare? In this example, we're doing something a little interesting We're using justify content and a line content to determine how items are being positioned in their container Justify content and the line content are basically the same thing just vertically and horizontally where as you can see these elements are centered in the row and There's space around them Vertically Let's look at the actual market for this Here's the container as a min height of 600 px and the justify content or how items are positioned on the row is centered and The aligning content which is how the rows are aligned in their container is space round Try something different. What about space? It changes both the space between so what did we just do? Basically, we're putting as much space between the items as possible. Everything is pushed out toward the edges of the container and I'm not even sure he would do this with that flex box and use how there was a min height as we get smaller the Containers getting bigger and we're putting less space between the items because there's less space in the container That's all I want to show you today if you want to understand all the stuff works Definitely check out my blog post on the Boku blog as I mentioned and also I recently made a site called learn layout comm Which is an overview of CSS layout techniques in general It's really useful if you aren't familiar with how to do it and if you are already an expert you might still pick up New trick or two. My name is Greg. I work at Boku and I hope you have a great day