CSS Flexbox Demystified

1. Intro: Hello and welcome to my class. My name is Dan Burgess and I'm an entrepreneur and web developer from Spain, live in New York City. I have been developing web applications for almost ten years. Flexbox is a CSS layout model in which elements within a container are automatically arranged in a responsive way. In this class, we'll go over the most important Flexbox roles. And this will give you a full understanding of how the tool works. At the end of the class, you should be able to understand Flexbox and include a flex container in your own website. The class is for people who have some experience with HTML and CSS, but don't fully understand flex container. Let's get started. 2. Setup: Okay, so I am using Visual Studio Code as my editor. You can download it on the Visual Studio Code website. It is free and it is cross-platform. It works in all the operating systems. So I have created two files. I called one of them index.html and the other one, style.css. And they are in the same folder. I have opened both of them and they are empty right now. So I'm going to create in here my HTML boilerplate that is pretty easy on Visual Studio Code, which is type exclamation point. And it gives us here on upper BAC on that, if we click on it, will create the boilerplate plate. I'm going to save it. I'm going to leave my style.css file blank for now. And I'm going to write something in here just to test it. And I'm going to open this. In my case with Live Server, live server, it's an extension for Visual Studio Code. I have it here and installed already. And we just have to right-click on the file and click Open with live server. So it is a star then k. Now sometimes it opens automatically. I'm going to open this in Chrome. So basically it is part 5500 as have to type in here. Local host colon 5500, which is the port and a resolver names. So we are good to go. So I'm going to get rid of this and I'm going to create some elements in here. I'm going to create a div element with our class of container. That's very easy to do on Visual Studio Code. I just have to type dot and then the name of the class container in this case. Then hit Enter. And it has created a div element with a class container. And inside this development, I'm going to create a few other divs. I'm going to give the first one a class of Dave, one, another one with a class of div two. Let's do 34. Okay? I'm going to save, and I'm going to add some text in here, like, let's call this one item, one item 234. Okay, I'm going to refresh the page here. Actually live server, it refreshes automatically. So here are our four items. One more thing, I'm going to give all these elements some padding and border just so we can see them easily. So for that, I'm going to say dot container space div. And this means all the div elements that are inside of an element with a class of container. And I'm going to say padding. Let's give them 15 pixels and then border one px, solid. Okay? And this is not working. Hi, I haven't linked the style dot CSS file, so for that, I have to add here at tag of type link rel equals stylesheet, href equals style dot css. And now this is working. So with this, we're ready to start converting the main div into a flex container and see what can we do with that. 3. Creating a Flex Container: Okay, so in here, in here, I'm going to add a rule for the div with a class container. So for that, I'll say the container. And all these rules are going to apply to this div. So all we have to do to make it a flex container is to say display flex. Now, this is a flex container, this div here. So this now looks different. There are some properties that have been automatically applied. We'll talk about them in a second. But basically it's just a note about naming. So this is called the flex container. And these are the flex items. We can also refer to the flex container as the parent and to the div items as the children. So when working with Flexbox, we're going to have some properties that apply to the parent to their flex container. We're going to have some properties that apply to the children. So let's get started with the properties that apply to the parent, to the flex container itself. 4. Flex Container Properties: So the first property is going to be flex direction and the default value is rho. So if I do this, this is redundant. It's going to do nothing. It's what we already have. Basically when the flex direction is row items, the items will be displayed from left to right. In countries in which we write from left to right, it will be the opposite in places in which people right from right to left, like for example, in Arabic, people right from right to left. So it would be the opposite. But in English, we write from left to right. So the flex items will be displayed from left to right. We can do instead of row, row reverse. And of course this will reverse it. And now they start from the right and then you go to the left. We can also do column. Now the direction will not be horizontal anymore, it will be vertical. And we start with the first item. And lastly, of course we can do column reverse in which now item one will be at the bottom and then we'll go to 34. So these are the four flex directions that we have. So we have really a horizontal, either in the normal flow of texts like left to right in Western countries. Row reverse, which is right-to-left in Western countries, column which is like from the top to the bottom, and column reverse from the bottom to the top. I'm going to get rid of this one. The next property is going to be flex, wrap. The default value. He's going to be no, wrap this one. So if I do this and save, nothing is going to happen and actually we cannot see it. I have to open the developer tools for you to see it. Okay? So if I make the window smaller, when there's not enough space for them, they are going to shrink. So if we change the probability flux drop, what is going to happen is that when we make the window smaller, the items are going to start to wrap. Their fourth item is going to go to the next line and then the third and then the second, but they are going to maintain their size. So let's look at it. So let's do here rap. And now we see how the fourth item goes to the next line, et cetera. And lastly, wrap reverse. So you can already imagine what is going to happen. Basically, they're wrapping from bottom to top instead of top to bottom. So I'm going to get rid of this and the next probability is going to be justify content. So start is the default value. If I do this, nothing happens. But we can also do here, and of course there'll be justified at the end. And we can also do center. And now they are in the center. And there are three more that are interesting and very useful. One of them is a space between this one. Item one and item four are at the start and the end of the flex container. And then all the other items in this case, item number 23 are evenly spaced inside of them. We also have space are round. And in this case, all the items have the same amount of space around them. So this one has this space here and this space here, and this one has this space here and this space here. What happens with this one, of course, is that between item 12, we have twice the spaces between item one and the beginning of the flex container, of course, because in here we have the space that belongs to item one and the space that belongs to item two. If we want an equal amount of space between all the items and also between the first and the last item on the flex container, we can use a space evenly. Now, all the spaces are the same and closing the space between the first item and the beginning of the flux container and the fourth item and the end of the flex container. I'm going to get rid of this. And this next property is align items. So for this one, I'm going to add some more stuff in here. For example, in the first one, I'll add an H2 title, a paragraph. In the third one. I'm going to add this and also an extra paragraph. Okay? So the default value of the property align items is going to be a stretch. So this is redundant. What this means is that all the items will stretch in their height to match the height of the tallest item, which in this case is item number three. If instead of that, we say in here flex, start. Now, they are all vertically aligned. At the top of the flex container. If we say center, there'll be aligned in the middle. And if we say bottom, not bottom, if we say flex and there'll be aligned at the bottom of the flex container. 5. Flex Item Properties: Great. So let's take a look at the properties of the children. So we have this rolling here, but this selector affects all the children as a group. We're going to target them individually. Now, for that, I'm going to create a row for each children. So let's say 1234. Okay, perfect. So the first one is order and the default value is 0. So if I do this, nothing happens. But if instead of 0, I put here too, I haven't saved it yet. But it is not going to be in the second position. We'll see what happens. I'm going to save it. Now the first one, I'm going to actually in here, call this item one and item three just so we can see them easily. So item one is now at the end. And the reason why is because all the other items, they have order 0 automatically. So basically this one is 0, this one is 0, this one is 0, and this one has the highest value. So it goes at the end. If in this one we gave it an order value of three. Now this div three will go at the end. So this is basically how it works. The last property that we're going to look at is flex, grow. And this one is kind of tricky. So I'm going to get rid of this first of all. Okay? So this is how it works. The default value is 0. So if I say flex grow 0, There's redundant. Nothing changes, okay? So basically every item is taken the space that it needs in, in inside of their flex container based on its content. So it's one, it's taken enough space to display its content. And the padding that they have, which is 15 pixels on every side. If instead of 0, we set this to one, Whether that in all of them. Okay? Now we see that each one is taking a fourth of the available space, which is the width of the window. So it could be tempting to think that if we set this one to two, now, these ones the subtotal of five units. So these ones would take like 1 fifth, and this one will take two-fifths. But that is not exactly how it works. Let me save this. That is not exactly what is going on in here. If for example, I set this to four, it's going to be easier to see it. Now, if that was what happened, basically it would be seven units in total. So these ones would take like 1 seventh each, and this one would take four sevenths. But really this is the middle. If this one was taken four-sevenths of the space, it would have to take more than half and that is not what is happening. So here's how it works. Basically, if we said all of them again to 0, they are taking this space and there is all these free space. So when they are not set to 0, it is this free space from here to the end that gets divided accordingly based on the number that they have. So in a proportional way. So if we set this one to four and all these wants to one. So basically each of the first three will take 1 seventh of this space. I'm not of the entire space, and this one will take four-sevenths of this space and not the entire space. That is how it works. So let's set this one to 1114. That is what is going on. Basically, it's item has already guaranteed the space that it needs. And it is the remaining free space that gets divided accordingly. Basically, like all the space is considered to be worth the total amount of units, like seven in this case. And then it gets divided and add it to its div accordingly to the number that they have in here. So if we set this one to 0, this one will only have the space that it naturally has that is enough for it. And now I'm, the rest of the free space gets added accordingly to these ones. Now for example, the free space gets divided by six. And these ones received like 1 sixth of the free space again. And this one receives for six of the free space. It is a little tricky, but that is how it works. 6. Outro: Thank you for taking my class and I hope it was helpful. I encourage you to experiment and try to play with the different properties in all the different flex their axioms that are available. Thanks again, and I will see you in my next class.