Using Flexbox in Websites and Applications

[00:01] Flexbox has a lot of power, but it's only useful if we can use it in real websites and applications. We're going to look at a couple of ways that Flexbox can change the way you can lay out an actual application.

[00:11] I started with Dan Abramoff's sample to-do application that he made for his Redux series. I added some classes to make it easier to style, but other than that I tried to leave the JavaScript in the market below and messed with the CSS.

[00:25] This root element is the main container for the application. I didn't want the width to get too big, so I set the maximum width to 720 pixels. I wanted to take up all the vertical space, so I set the max height to 100 vertical heights or VHs, which is essentially 100 percent of the vertical height.

[00:44] I wanted to push the content down to the bottom. Even though route only has one child, I set the "Display the Flex," and I set the "Flex direction to column." Then that allows me on the larger screens to set the justify content to flex-end and to push all the content down. On the smaller screens, when it's less than 730 pixels, it goes back up to the top which is the default, setting it to flex-start.

[01:10] I also want the order of these elements to change between the large and the small screens, so the default has this filters box at the top. Using the order property, I set it to negative one to make sure that it stays up at the top. On the larger screens, I set filters with the order to zero, and essentially do the same thing with the to-do list, just swapping them.

[01:34] This to-do list, which is the list of these items here, it's negative one on the larger screens, making sure that it stays at the top of the list or the top of the elements. I set it to zero, making sure it stays in its normal place which is below this new to-do item and below the filters.

[01:53] I could also do the same thing using the flex direction and change it between columns and columns reverse. In fact, I do that with the list items. When I type in a new item here while it's the top-down view, I wanted the new item to show up right underneath.

[02:12] When I'm using it on the larger screen, I want the new item to show up right above it so that it's always close to that box that you typed in. I do that using the flex direction column on the to-do list. Up above on the smaller screen, I have the to-do list with the flex direction of column reverse.

[02:33] There are some layouts that you don't even need media queries to read the response and benefits of Flexbox. I used Flexbox in several places on the recent PhoneGap.com redesign. You can see at the very bottom I have a collection of lists, and as I re-size this window, these lists will take up this space appropriately and then it will actually break.

[02:55] It will use up as much space as possible, and using flex-wrap it will actually move to the next line so it doesn't overlap on itself. I'm doing some similar things up here with this grid-like system. I'm using wrap to use up all the available space. I'm not even using media queries heavily to make that happen. I'm just using Flexbox and flex-wrap.

[03:18] With the ability to reorder children wrap elements and divide up space on a collection of dynamic children, Flexbox is an essential layout tool for responsive applications and websites.