 It's been a fun conference so far. Yeah? You know, I was worried that nobody would show up because, first of all, this is one of the last sessions. One of my co-workers at Media Current is also having another session about the weather channel. Wait, wait, wait, don't leave. Don't leave, don't leave. And not to mention that Dries is doing a Q&A right now. So I had my parents on standby just in case nobody showed up. So Mom, Dad, thank you, but you guys can go now. Thank you. We'll get started. My name is Mario Hernandez. Thank you for making the time. I know this has been a long conference. It's tiring. I know I'm very tired. I live here in LA, and I can't imagine traveling and anything like that. But I appreciate you guys showing up. I hope that this will show you something that you can use on your next project or your current project. And this is more of an intro to Flexbox. And so far, it's something that has worked out really well for us at Media Current for some of the projects that we're working on. So I hope that you can see the value on this. By no means I am an expert at this. So I will definitely try to answer your questions. But if I can, I'll at least try to point in the right direction and figure something out. And if somebody else has the answer, I would appreciate if you can jump in and help out. So advanced layouts with Flexbox. The title of the talk is a little misleading in a way, because although you can use layout or Flexbox for layouts, the way things are with browser support and the way things are with how new this technique is with Flexbox, it is not recommended that you do a full layout with just Flexbox. You always want to be able to have a backup plan. Because like many of you, just like me, we're still learning this technique. And it's a little challenging, because it offers a lot. You can do a lot with it, but it does take a little while to get your head around it, wrap your head around it. And in a minute, we'll see why. So I'm Mario Hernandez. I'm the one on the right. So you can follow me at the Science Drive, always posting about Drupal, the science, CSS, SAS, what I ate last night. So anyway, I work for Media Current. We are a Drupal-centric shop based out of Atlanta. And we work remote. We work on excellent, great projects, as I mentioned. And we are doing another talk right now on the Weather Channel, which we launched earlier this year. We are working on our very first enterprise level Drupal-8 website, which we are hoping to launch tomorrow. So that's going to be very exciting. It's been quite some crazy couple of weeks. We do everything, as you can see, digital strategy, design, theming, development, support. So check us out at mediacurrent.com. We're always looking for great talent. So if you are that person, we'd love to talk to you. Do you guys hear an echo, or is it just me? Just me, right? Yeah, that's just only the case. So we'll talk about what kind of problems are we trying to solve with FlexFact, because people may say, what's wrong with the way we do things now? Things are working out so great. We're able to build sophisticated websites. Things are working out really nicely. So why change things? Well, there's a few things that we can improve that will not only save us time, but it will also give us a little more flexibility on how we do layouts currently. So we'll talk about what some of those problems are and how Flexbox fixes those problems. Obviously, we'll talk about the Flexbox way. What Flexbox is, how it works, how you can use it. The browser support in Flexbox, which is probably the one thing that will make you think twice whether you should use it or not on your project, we'll get to know Flexbox by talking about all of these properties. And I say all of these properties, because there's quite a few properties that Flexbox uses. And that's kind of what makes it a little challenging to learn at first. But once you get the hang of it, it does make sense. But there are quite a few properties. Flexbox is more as a module. It's a collection of properties that you will use. So it's not just one thing that you do, but it's a collection of things in order to accomplish what you need to accomplish. We'll talk about some practical uses of Flexbox and some fallbacks, because obviously, browser support is still something that you should definitely take very seriously. But we'll talk about some techniques you can use to make it work on browsers that do not support Flexbox. I will provide you with a list of resources that I used to put this talk together. Great resources, screencast, literature, and everything So you'll be armed with a lot of information after this talk to go out there and learn it a little bit more. If we do have time, we can go over some actual code examples on how you would do certain things. We'll see if we do have the time for that. But I will be more interested in answering your questions if I'm able to, than actually going just through things that I thought you may need to know. So what is the problem with float layouts currently? There's quite a few, actually. There's difficulty with containment. When the content in your website is unknown or unpredictable, that could create problems for you if you're not well-prepared, if you haven't planned ahead as far as your styles, your design, your layout. Things can fall apart very easily if you're not kind of thinking ahead. What are the possibilities for content on this particular website? And how can I proactively plan for those unknowns that may come up in the future when you hand over this website to a client? So that's one of the issues with floats. For the most part, they're source dependent, although there's techniques nowadays through SAS with some grid systems. You can actually do some things where you can actually change things around that change the order, visually change the order of your elements regardless of the markup order or the source order. But there's still some limitations there. Flexbox does address that really nicely. Difficulty equals high columns. This is something that, as a themeer, you will run into. When you have two columns or three columns and the content within those columns is not the same, then your columns are not going to end up being the equal height. If that is something you want to do, there are some hacks you can do. For example, add some sort of background image that will repeat itself from top to bottom and that gives the illusion that the columns are equal height. But with Flexbox, that is something that we can definitely address very easily. There's no float center, although this is not such a big deal because you can quickly center, if you know the width of the particular element or if it's just a block level element, you can easily center something by doing a margin auto. But this one here, there's no vertical alignment or vertical center and this one could be a little more tricky. It is still possible to do with just plain CSS through some hacks and things. Sometimes it requires for you to know the height of the element or the parent element that you're working with in order to be able to center something. There are some things out there that you can use, but it does require a little more effort and Flexbox makes that really easy for us so you'll see that in a minute. So how does Flexbox solve these problems that we just talked about? So Flexbox makes items grow to fill the available space or shrink them to avoid overflow. So that's one of the things that we'll notice that no matter what type of content you have in your regions or layout, Flexup is able to control the dimensions of the containers to avoid that overflow. So this kind of addresses the problem that we were talking about earlier about the unknown content. You don't know what's gonna happen if the content always changes to something that you would not expect. Flexbox does not allow any overflow of their child elements. So that gives you some, it makes it predictable on what you should expect as far as the layout of your website. There's still some, obviously some things you should consider and take under consideration because there will always be some consequence based on the type of content that you're providing on your website. But it's not something that will break your website. Your layout will continue to be the same way. It may not look 100% the way you want but it will not break it the way floats or layouts will do it. So it gives Flex items proportional dimensions and this is proportional. And you'll see in a minute in a demo that how things are automatically adjusted based on its surroundings of the elements. So layout lays out the Flex items and when I say Flex items, I'm talking about items that are within a container or a Flex container. We'll go into more detail about in a minute so it'll make a little more sense once we get into the specifics of each of the properties. This is the one where you can literally position your content or your items in any order you want regardless of the source order of your markup. And this is a very powerful, especially for responsive web design where for the most part, when you're looking at a website on a mobile device, you want the most important information on the top. Maybe the sidebar is not as important or the footer. So with Flexbox, you can actually tell it. I want this area of the website to actually be on top instead of this other one. I don't care what the markup looks like. I want this area to be actually be on top. So that's very powerful responsive web design. Again, we can still do some of that with SAS nowadays and some grid systems by the Singularity GS, but it's not as flexible. It's not as powerful as Flexbox is. So briefly, what is Flexbox? What Flexbox, to me, is the new black. It's just pretty cool. It's very awesome. You'll see in a minute when I go through a demo why it's becoming one of the hardest things that I've seen since responsive web design. For the last five years, responsive web design has been the one thing that everybody wants to do. And I think Flexbox is kind of taking its place now. And if the browser support is right, then you'll see that there's a lot of things that you can do with it. So I'm not gonna repeat this. I'm just gonna, I'm sure you can read. It's basically kind of the same thing that we went over. The one thing is, what I like is the ability to not allow that overflow. That could be problematic for us if things all of a sudden change for us, but Flexbox allows us to keep some sort of control there. So the concept of Flexbox is pretty straightforward. Well, to an extent. We have a container. And this container could be just about anything. It could be a div, it could be a non-order list, it could be a paragraph, anything that is able to hold child elements or dependents. So in the example here, let's pretend that this is a div. And so that will be considered our flex container. Within this flex container, we have flex items. So these are the immediate descendants of this particular container. So that's important to realize because Flexbox is not activated on subsequent items within the flex items. It's only reflected on the immediate descendants of the flex container. This Flexbox, the one thing that makes it a little more challenging to wrap your head around is that it's not the same way you would do float layouts, where you do top, right, bottom, left. And Flexbox, you instead use the main axis, and you will also use the cross axis. So instead of laying out something on the left, you will say flex start. If you want to lay out something to the right, you use the flex end. And for the cross axis, you do the same thing, flex start, which will be at the top and the bottom. Each of the flex items have, you can assign dimensions to them, or you can actually leave them fluid. I've actually tried assigning fixed dimensions to flex items, and that works out really well also because with Flexbox, you can allow things to grow or shrink based on the surroundings of this particular element. So percentages still work, pixels work, and so it gives you a lot of flexibility, no pun intended. We have, let's see here, this first. So that's the cross start and cross end, and on the bottom left, we have the main start, and on the bottom right, we have the main end. So those are the properties that we use. So instead of saying left, top, right, bottom, we have to learn this new way of laying out things within our containers. So that's the part that takes a little bit of getting used to because we're not used to saying place this at the start or at the end, or we'd say left, right, top, bottom. But once you start looking into and playing with it, you'll get the hang of it. So let's look at the properties that Flexbox offers. And I said there's quite a few, and a lot of them do offer the same values, but based on the direction that you're using on your elements, that could give you different results. So there is flex direction, flex wrap, flex flow, justify content, align items, align content, order, align cell, flex scroll, flex ring, flex basis, flex. Now each of those has at least two between two to four values. So you can imagine all the things that go into place to make this work. Now the list itself can be overwhelming just when you look at it, because you can figure out how do I use this? When do I use this? Do I use this on the parent container, the flex container, or do I use this on the shell elements, the flex items? Well, the ones on the left are for, you will use those on a flex container. The ones on the right are used on the flex items. So that's a nice way of kind of making a little more sense on this list of properties, so you don't get overwhelmed with all of them. So I can tell you from experience that the properties that you will use the most are the ones for flex container. You will still use properties for flex items, but the ones that I've seen, at least the ones that I've been using the most, to do the things that I want to do are the ones for flex container. So the usage is pretty straightforward. We have the display property on CSS, and if you have a block level element, then the display property will be set to block. If you have an inline level element, the display property is set to inline. You can also do inline block. You can convert an inline level element to a block level element by doing a display block, or vice versa. But for flexbox, the display property is set to flex. So if we have a container, and again, this container could be anything. It could be a div. It could be a non-order list. If you simply set the display property to flex, you have activated flexbox, and you're ready to start using flexbox for this particular container, and the immediate descendants of this particular container. That's all it takes. Very straightforward. As far as browser support, it's actually very, very good, but our lovely Internet Explorer still needs some special attention. But if you're dealing with IE10 and above, then you have a better success with this, because even though IE10 does require a vendor prefix, if you're using a tool like Auto-Prefixer, then that will automatically generate that for you, and you don't have to worry about that. However, if you're using IE9, or you have to support IE9 and below, you can use flexbox. There are some polyfields out there that you can use. Personally, I will not feel comfortable relying completely on flexbox if I'm supporting IE9 or below, but there are ways in which you can still use flexbox for the browsers that do support it, and be able to come up with some fallbacks for the browsers that do not support it, and we'll go over some of those techniques in just a minute. So vendor prefix is one thing that you will have to use. There's no other way around them. It's just the way it is. Even Safari, Chrome, Firefox, they still need some vendor prefixes, and I'm thinking obviously with time that will get better, but for the time being, we have to use those vendor prefixes. This is how some of those properties will be declared on a flex container, and as you can see, there's tons of vendor prefixes there that you will need to add, and so this could be overwhelming just to be able to activate, justify, or align content center, so you need some vendor prefixes. However, if you are using a tool, like I said, like auto-prefixer, which I would highly recommend, you don't have to worry about yourself typing all these vendor prefixes. You can just let auto-prefixer do it for you. Instead, you will type something like this, and when your SaaS is compiled, then all those vendor prefixes will automatically be added for you on the CSS that is compiled. So that makes life easier. It makes your SaaS code cleaner, and you don't have to worry about remembering all those vendor prefixes. I don't know if there's anybody that can remember them anyway, but this just makes it a lot more cleaner for you to work with, so it's more manageable this way. So highly recommend, obviously, SaaS, and auto-prefixer, if you have not looked at that, I would highly recommend. So the fallbacks that we talked about before, there are several ways in which you can go about this. There are some third-party tools out there. I know there's a Flexi, I believe, it's a tool that is a JavaScript library that you can use. I have not personally used that myself, but there are other techniques. One way will be, and this is all depending on your project needs, what it is that you're trying to do, what your environment is like. There's times when we don't have access, direct access to our markup on Drupal, and so this particular technique will not work because you will need to be, get into your markup, your HTML.tpl.php file in order to make this kind of change here to be able to add a conditional comment that says if the browser is equal to or less than IE9, I wanna add a class of no flexbox. That means this browser does not support flexbox. And then I can use that as my main selector on my SAS to say if this class exists on the body of my page, then I know that flexbox is not supported, and I can then go back to my layout technique to be able to accomplish the layout that I want to be able to create. So this is one way, and obviously as I said before, if you don't have direct access to the markup, this is probably not gonna be the way for you to do it. There is another, so here's the example of that. So we'll have a flex container, and we'd use flexbox for that, and then for the browser that doesn't support flexbox, we just prefix our rule with no flexbox, and then we use our display block and, you know, float left to be able to align things next to each other. This is just a quick example. Here's another technique, which will probably be the one that I will recommend, and this is you can actually create your own build of Modernizer and say I wanna be able to add to my build, my Modernizer build a specific class of flexbox, which means that Modernizer will detect whether my browser supports flexbox or not, and if it does, it will add the flexbox class to the body of my page. So now I know that I can count on that class on my page if the browser supports flexbox, and so when I'm trying to create my rules, I can say for anything that supports flexbox, I can just prefix my rules with the class of flexbox, and this approach to me is better because I want to leave the default for the browser that don't support it, so I don't have to add any type of prefixes or any classes to my rules. I wanna continue to use float layouts for those, but for the browsers that do support flexbox, I want to prefix my rules with flexbox, the class flexbox, and at least for the moment, that's my personal preference, just because I am being very selective when I use flexbox. As I said before, you don't wanna rely completely on flexbox for your entire layout, so I'm very selective. I'm just speaking areas on my page or my website where I like to use flexbox, where I think it makes sense if I need to center align something, if I need to float things very quickly or have content a little more dynamic, then I can say for my navigation, I wanna use flexbox, so for the rules of navigation, I will prefix my rules with the flexbox class, and then leave the non-prefix rule for my regular layout approach. There's obviously other techniques out there, and if you look them up, you'll find many other things, so it's a matter of what will work for you, but to me, this is something that is pretty solid just because I would expect that most people use Modernizer just because it makes your life easier to detect what the browser supports and what it doesn't, and so since we're already using that tool, why not just add another class that we can take advantage of to deal with our layouts. So I'm gonna do a quick demo of this flexbox property, so we'll go one by one onto how they work and how you can use them, and so to make sure, because I wasn't sure how reliable the Wi-Fi was here, I record a screencast that will go through and I'll just describe what each of those things that you see on the screen are doing, so let me bring up my screencast real quick. Hopefully you guys can read that. Are you guys able to read that, okay? Kind of. I'll be describing it, so the quality is not the best, maybe if I don't make a full screen level, let me see here. The quality is, the screen quality is not as good, but let's try to go with this, so let me, one day. So what I have here, just to give you a setup of what I've done here is I've pretty much just created a list of divs, right? There's a parent div that you'll see here in a minute, and then there's a whole bunch of items that with the divs with the class item and the parent div has the class of parent. You don't see it here, but you'll see it in a minute. And what you see at the bottom, the y area, is just the result of what I've written up here. So let's start with that real quick. So, as I said before, what you see here, this could be anything, this could be an unorder list. If you create a navigation, this is perfectly fine to do your UL and then your list items inside that. So you have a parent element on the top, and what I've done for CSS, I created some rules, but before I do that, let me show you that I'm using SAS for writing my code. Emma also, through CodePen, allows you to attach out of prefixer for this particular example. So I don't have to type all those vendor prefixes that we talked about earlier. And so I'm going to close that and just go over. The rules that you see on the CSS pane are very straightforward. It's just for decoration to give some dimensions to my boxes, a border, so we can see where things are and how, as we start manipulating this with Flexbox, we can start seeing the effect of that. So the first thing I'll do is I'll go to the parent container and activate Flexbox, and we do that by simply applying the display property of Flex. And that automatically aligns things in a horizontal way. The reason this happens is because by default, there are properties within Flexbox that are already taking effect, even though we have not declared them yet. They have default values that are already in effect here by simply activating Flexbox, so that's why you see all the boxes lined up horizontally. And so, and in a minute, we'll go through those. One of those properties is the flex direction. The default value for that is row, and that's what you see here. So when I type row, nothing happens because that's the default value for that particular property. But I can also change that row display property to row reversed. And what you'll see here is that not only my elements are moved to the right, but they're also reversed in order. You see now that number five is on the left, number one is on the right. So row and row reversed is what you will use if you wanna line up things horizontally, whether you want it on the left side or on the right side. Then we also have column. It's one of the other flex direction values, as you can see. This is something that you would normally use when you lay out a website, columns. And then if you wanna do reverse, same thing. Now the numbers have chipped from top to bottom, as you can see here now. So in the example that I, hopefully I'll be able to show you if we have time, flex direction column is what allows us to lay out the columns of our website. So let's go back to row for our default value here. The next property that we'll talk about is the flex wrap. And this allows us to wrap elements on our page. By default, the value for flex wrap is no wrap and that's what you see here. So when I type no wrap, nothing happens because that's the default value for that particular property. If I change the no wrap to wrap, right now you don't see anything because there is plenty of empty space still in my container. So there's flex plus can wrap those items. But if I increase the width of each of those elements, then now those supersede the width of my container and now flex but wraps them. And as you can imagine with wrap, I can also do wrap reverse. And that will simply just change the order wrapping of my flex items. The nice thing about what I talked about earlier is that even though each of the elements, flex items that we have there are 250 pixels, they supersede the width of my container but they don't collapse my container. They instead shrink. There is a shorthand that combines not only flex direction but flex wrap and that is the flex flow. So if I use flex flow and I say raw and no wrap, that's combining both flex direction and flex wrap properties into one. So I'm going to go back to my original width of my elements. This one's pretty nice and this one can be confusing with some of the items we're talking a little bit. Justify content. The default value for this is flex start and this one works on the main axis direction. Okay, and then we have flex and and that moves things to the right. Now this is different than row reverse that it does move things to the right but it doesn't change the order of the elements. You still see the same order one through five versus row reverse did change the order of each of the elements. Then we have sender. We have a space between, let me pause this for a minute here, and what a space between does, it allows us to first place the first item all the way to the left of our container, the last item all the way to the right and then it evenly distributes the remaining available space among the remaining flex items that we have left. So as you can see, the only reason you see space on the left number one and space on the left on the right of number five is because I originally added some padding around each of the elements but otherwise they will be flushed all the way to the left or to the right and the remaining available space will be distributed evenly among the remaining three items there. So that's what space between does for us. The other property similar to space between is space around. And this does something different than space between, although it looks very similar, but what it does, it distributes all the available space evenly among all the elements. You can see on the left and the right, let me, sorry about that if it went too quickly. So you can see that there's exactly the same amount of space on the left and the right of each item. And so that's the space around property value there. So what I'm going to do next to show the next property, I'm going to give our container some height just because the next properties do require that we have some height on, it doesn't require a height but it will display better for us. This property works on the cross axis, not the main axis, so it works from top to bottom. And so the first property will be aligned items. And we see that stretch is the default property or value for that, so you can see there. Then we have flex start. You can see how some of the same values that we are applying to the other properties we are using here, but the result that we're getting is different because now we're working on the cross axis versus the main axis. So that's something very important to keep in mind because that could be confusing. At first that really confused me because I wasn't sure which one I should use. They both have the same value but what is it, which one do I use? So it all depends on whether you want to work with things horizontally or vertically. And then so that's the property that you use whether it's justify content or align items, even though they have pretty much the same values, the result that you get is completely different. So that's the flex start and as you can imagine, we have flex end. So that just move things to the bottom. So again, we're working on the cross axis this time. We have center. And again, this is something that with float layouts it's not easy to do, to perfectly center something. Not only just one item, but in this case we're doing it with a collection of items and we're perfectly centered in this. Very difficult to do with just plain CSS unless you go and find a technique. There's some sass mixings out there that you can use to do that but it does require a little bit of extra effort. Here all you have to do is set the property to center and that does it for you. Very, very, very easy to do. This one obviously also baseline is one of the properties that first it took me a while to figure out but what it does, it finds the common baseline among all the elements and aligns things based on that particular baseline. So in the example here what I'm going to do is I'm going to select item number three. I'm going to single that out and I'm going to change the font size of that particular item to something larger. And because I already have the align items properly set to baseline, even though I'm changing the font size of that particular item, it will align all the rest of the items on that particular baseline. So as you can see, the bottom of number three is the same. It's lined up exactly the same as the bottom of all the rest of the numbers. Even if I increase the number to a larger font size, that baseline alignment still remains. So I'm going back to giving our reflex items our dimension and for this one, I'm going to add more content to our page just because I need more information. The next property that I'm going to talk about requires at least two columns, I'm sorry, two rows of elements in order to work. It won't work on just one. So as you can see, again, we have items, let me reverse just a tiny bit. This here, we've added a lot more information to our page and yet our layout doesn't break. What it does instead, it shrinks our elements. And so that's kind of nice because you know that no matter what, your page is not going to break. It's just a matter of figuring out, what do I want to do if we have a lot of content in this particular region? Yeah, my page is not going to break, but it may not look right. So you can find ways on how to better display that content if there's way too much for you. But you can rest assured that your layout, at least it's not going to break. So I've added three times the number of elements, shell or flex items to our page. And let me see. I'm saying I wanted to put everything in a row, but I want to wrap them. So now once they wrap, they become the width that I actually assigned to them. And if I, I'm decreasing the height a little bit. So the property that we're going to be going in, because this one best requires two columns of elements, I'm going to use the align content property. Now this is different than the align items. And so that's why I'm talking about how this could be a little confusing at first because you have so many different properties that not only sound the same, but they also have the same values. So we're looking at the align content property which only works on the cross axis and with multiple columns or rows of content like we have here. So the default property for this is actually flex start. And what it does, it removes any empty space around that and it puts everything as close as it can to each other. The only reason there's space in between is because again I have some padding that I've added myself to the elements. I can flex and then you will just move all the content all the way to the bottom. We have the order property which is the center. And again this is extremely difficult to do not just with a single item the way we do it now, but with multiple items. So, and you can see here that is very, very straightforward. The space around is the order property we can use which is it gives all the elements equal space on the top and the bottom. Again we're working on the cross axis this time. And then we have the space between which simply distributes the available space evenly in between of the elements that we have here. The, and this is an example that I wanna show you how you can perfectly center something horizontally and vertically. So what I'm doing here, I'm using the justify content property to center things horizontally. I'm getting rid of the extra content because I just wanna show it with one row of items. And I'm getting rid of the align content property because this one, that won't work on one single row of elements. Instead I need the align items property instead. And that works on a single row list of elements. And so as you can see here, I'm perfectly center something vertically and horizontally by just using two properties. This obviously is doable the way with the currently, but it does take a little more effort and a little more code to accomplish without Flexbox. So all those properties that I just went through are just for the Flex container. We haven't touched any properties for the Flex items yet. And so you can imagine how much is there to remember and to know just for the Flex container and now we can start with the Flex items properties. So, but the good news is as I said before, the properties that you'll probably use the most are the Flex container properties, the ones we just went over. The other ones are a little bit different, but it's quite a few as well. So I'm using item, the class item meaning I wanna include all the elements that have the class item, which is all of them, and I wanna set the Flex grow property. The default value for that is zero, meaning don't grow. That will be the default value. If I change that to one, we're saying I want all of my elements to automatically grow. So if my container grows, my elements will grow with it. And then that may be something you may wanna do on some instances where you don't want things to remain the same size. You may want them to get wider or narrower based on the layout of your website or based on the device size that you're using. So that's the same thing for all the elements because I'm using the item class. What I'm going to do now is I'm going to single out one of the elements only and change things a little bit around for that particular element. So right now I'm telling all the elements that they can grow. And for the element number three, the Flex item number three, I'm going to say that that can grow two times as big. You know, a two times ratio of the other elements. So this is, take a little while to understand. So by default, all of my elements will grow, but the number third element will grow twice as big as the other ones. If I change the value of the, for all my elements to not grow, then the element that is set to grow will take all the available space and use it to grow. Regardless of whether I use the value of one, two, or three, it will simply take all the available space and use it to grow. All the other elements are not growing. They just set to the width that I assigned to them originally. If I add one more element or single out another element, Flex item that is, and I also allow it to grow, then what happens now, the two Flex items that are allowed to grow distribute the available space evenly, except I'm using, did I move too quickly? So the fourth item will be allowed to grow, double the ratio as the other item. So by default, items one, two, and five are not allowed to grow. And so whatever available space is left, it will be distributed between item three and four, but four is taken up more because it's allowed to go twice as the ratio as number three. So that's why it's twice as wide as number three. Let's see what we're gonna do here next. So that's the grow property. The next one is, let me see if I remember. That will be, I'll single out another element again. I don't know why I keep picking number three. And I'm going to use the order property. This is pretty nice. This is what we're talking about, how you can actually change the source order of your layout. It's still going, okay. So regardless of how your markup is written, you can actually say, no, on my mobile device, I want this one piece to show up on top instead. And this is how you do it by the order property. All of the elements by default are zero based. So their order is set to zero. So if you use a negative value for the order property, then you're putting things to the left of anything that has no value or has a zero value. If you set a positive value, then you're setting things to the right of those items that don't have a property set yet. So you'll see for a sample here, I remember three, I set it to negative one and they moved number three to the left. Okay, so items two through five don't have a value, so they're on the right. If I grab item number, in this case, if I grab number two and I give this a positive value, then it will move number two all the way to the right because everything in between doesn't have a value just yet. So this is how you can nicely say on your layout, you can say, I want my sidebar. If your markup shows your sidebar at the top, on desktop, for example, but on mobile device, you want to show it at the bottom, you can either give the main content area a negative value, so it shows up on top, and your sidebar a positive value, so it shows up last, or you can do one, two. And so number one will be first, number two will be second. But it's very, very easy to do. We've done this on this project that we're ready to launch where there were some content that we needed to rearrange on mobile device, and this is what allowed us to do that, so it's very, very nice. So here I'm going to give another flex item also, the order value, and this one is going to be, for item number one, I'm going to give it the same value as item number two. So items can have the same value, and what will happen is they will go back and say, okay, what order are they in the markup? So even though they have the same flex value, then it will recognize that, but it then will say, okay, let me see what order they're in the markup, and then I will use that to list them. So even though they both have the value of one, obviously one comes first, two comes second on the markup. So it will use that. And so now you can see that one and two are next to each other, even though they have the same value. If I give the number one, number two, then one moves to the right of two, because now item number one was given a higher value, order value than one. So let's see what else we can do here. Again, this is just the flex item properties, and we can do things for the items also where we can actually, let's see, right now we're letting things grow. I'm just adjusting things right now so I can set for the next property that we'll be using. I'm going to remove a couple of properties that are in these because that will give me some mixed results on things that I don't wanna do. So I'm getting rid of a couple of properties from the container, from the flex container. I'm setting things back to the kind of their original setting, changing the width of each of the items. And as you can see, there is no collapsing of anything. I'm going to use the flex string property, which as you can obviously imagine, this will do the opposite of allowing them to grow. It will allow them to shrink. The default value for the flex string property is one. The way I understand the flex string property is kind of like yes and no. At least for me, that's the way that it makes the most sense is to think about kind of like a Boolean value. Is it, am I allowed to shrink? Yes or no? And so one, to me, represents yes, and zero represents no. But let's take a look a little more detail here. So we have all the items saying yes, I want to shrink, but for item number three, I keep picking on number three, I'm going to set the flex string value, I believe is zero, and let's see. That's zero. Yes, so as you can see, because all of our items, except number three is allowed to shrink, they're small now, except number three, because I'm saying number three is not allowed to shrink. So that will take all available space and grow instead, whereas the other items will shrink. Now, let's see what I'm picking again, another item. There we go, number three. And we're going to use the align self property. This is pretty neat because you can individually, even though we have a collection of items, and this again, it could be an order list that you have for a navigation. A good example would be, let's pretend that each of those boxes is part of our main navigation on our website. But the one all the way to the right, number five, let's say that is our log out link or our login link. So I want my navigation to be on the left of my page, but I want the log out link or login link to be all the way to the right of the page. So I can actually single out a particular item on my list and say move this one, just this one all the way to the end and leave everything else all the way to the left. And so that gives you a lot of control because it's very difficult to do that the way we traditionally do this. But this one allows us to individually pick an item and move it around any way in any direction we want. So in the example here, I'm getting rid of the height because the default property for the align self align self is stretch. So these items automatically stretch. This is great because this solves the problem that we were talking about equal columns height. So regardless of how much content is on each of these boxes or flex items, they will always be the same height versus the traditional float layout way, each item will be as high as the content is item. So this one solves that problem here. But now I'm picking on number three again and I'm saying just this particular item, I wanna align it flex start or flex end and I can move it around. I can center it and the other ones remain intact. So you may not always see the value or maybe the use case for a particular thing but there's times when you have to do some weird things with your layout or your designs where this may become handy with very little effort. So now I'm grabbing number four and I'm saying I wanna flex start. So this is very difficult to do if you're working with a list of items, very difficult to be able to change things around without altering everything else. And as you can see, this allows us to do just that. So very, very powerful some of the things you can do. I believe, let me see. That's the end of that particular demo. So what time do we have? What time is this supposed to be over again? In 10 minutes? Okay. I could show you real quick a kind of practical example of how you can use this on a website. And then I can maybe answer any questions if there are any questions. So let me just quickly show you what we have here. So we have a typical layout here, right? We have a header, a navigation, main content area, sidebar, and our footer. Nothing special. The only thing that I've done is that I'm using Flexbox, but only for the main content and the sidebar areas. And this is what I was talking about, being selective where you use it because you don't wanna use it all over the place. So let me jump to the code to show you, there's a lot there, but I wanna focus on just this particular area. Let me first show you the markup for that particular layout that you saw. Nothing special, we have a container and don't confuse this with the Flex container. This is just a website container. We have our header, our navigation, and then I wrapped the main content area and the sidebar into this container here, content. And then you see our main content area and our sidebar. Okay, and then we have our footer, that's it. Our styles, in addition to what dimensions and colors, which doesn't matter at this point, for our content, which is the wrapper of the main content and the sidebar, I'm turning that into a Flexbox element, a Flex container. And by simply doing that, because the default value, when you turn a pairing container into a Flex element, the default value is to line things up on a row, right? And to not wrap them. But that wouldn't work for us, because if I change, where did it go? Here, if I, so this is the container. Change this to row. This will be the default value for that particular property there. If I change that, then that's what happens. Right, so if I change the layout to column, now we're laying out things next to each other. And what you see here, this is the main content area. Actually, this value here that you see here, this should be down here. But because I'm centering everything, as you can see here, because I'm centering everything, perfectly centering the labels that you see here, that's why you see it up there. I'm not gonna show that, but this value can actually, I can move this down to this area here, which is where it's supposed to be down there. If I just wanna affect that particular area, the main content and the sidebar. And then I'm using, on the main content area, I'm saying I wanna use the Flex grow property and allow this area to grow three times the size of the sidebar. And then I go to the sidebar and say yes, I wanna allow you to grow, but only one time the side of the other, of the whole width, right? So three times, so when you look at this, the main content area is three times the width of the sidebar, and that's how that can be accomplished. Then what you can do if you're dealing with responsive web design, then you can start changing things around. When we get to, let's say, a mobile device, we can change the value of this from column to row. Again, I remind you that this should be down here. I just don't wanna uneven the other things. So when we change that to the value of row, then things will stack, instead of being next to show those stack, and that would be better for displaying the content on our mobile device. At that point, I can even change the order. I can say, no, no, maybe I want the sidebar on top so I can give the sidebar an order of minus one, and that will put the sidebar on the top of my mobile devices. And then through a media query, I can change that to its default value, and it'll show up on the right side of the page on a large device. So I know there's a lot to remember, a lot to learn about Flexbox, but I can tell you that it's very promising, and we've used it on actual projects, Drupal projects, Drupal 8 projects. I've used it on some personal projects, and as long as you're careful and you know exactly what you're expecting to get out of it, you can really take advantage of it. So with that, I'd like to end and answer any questions that you may have if there are any questions. Thank you, thank you very much. If you do have questions, if you could please use the microphone. Yeah, the question, do you know how a screen reader would interpret a Flexbox that's been reordered? So in the case of, let's say I have my phone and I have the voiceover turned on, how it works for accessibility. Very good question. Accessibility is something that we really try to make a huge effort to make sure that we address on all of our projects. My guess, just because I'm not an expert in accessibility is that a screen reader will use the markup order in order to read the content of your website. So that shouldn't change with Flexbox, even though we are visually displaying it in a different order, the markup remains the same and so that's what the screen reader will use that would be my estimate. Thank you for the question. So my question is if there's a way to affect a sub-item of the item, so the specific use case is that I've got some testimonials and then there's a quote and every testimonial has a quote, the person's name, title, whatever, but only the quote has a background and that's obviously gonna be different sizes. Is there a way to just affect a sub-item to grow or shrink or? Well yes, what you would need to do is whatever is holding the sub-item is why you need to first do the display Flex property on and then the sub-item will automatically become a Flex item. Thank you. You're welcome. Any other questions? Well thanks everybody. I hope that I enjoyed the conference and enjoyed the rest of the day tomorrow. Thank you so much. Thank you.