 Hi, welcome to Flexbox, the complete guide. I'm Rostov Konstantin and I work as a web developer for about 4 years and I'm passionate about learning and sharing knowledge and that's exactly why I'm here, to share my knowledge about Flexbox with you. You know, Flexbox is this new layout module in CSS3 that lets you layout online and distribute space among items within a container, even when these item sizes are unknown or dynamic. With this new layout module, Flexbox, you can forget about that pain in the neck every time you had to build a new layout structure, or you have items that must adapt to the screen size or assume different positions or different alignments on it. The old-fashioned tables do float and clear properties and even the displaying line block, they all used to help us to achieve our goals, to build our layouts, but they also used to bring us nightmares, because these properties weren't meant to be used for building layouts, although they helped us until today to solve our layout problems. Well, Flexbox is built specifically for building layouts and responsive design, so that's why you should learn it. In this course, you'll learn how to build flexible designs with less code to develop very responsive layouts and to be fearless about new layout structures. This course is for everyone who is tired of struggling with these kinds of problems, for who likes to find the cleanest and most reliable solutions, and for those who have a basic knowledge of CSS and HTML. For this course, we'll follow this page, which is available on GitHub, and you can clone and play with it, at your will. Here we'll cover all the properties of Flexbox and other things like raw support and the basic concepts behind these properties. I mean a series of videos and challenges with different problems about HTML layouts, and let's solve them together. Hi! So, now that you know what is Flexbox and what is its compatibility across the existing browsers, it is time to get started and start learning how Flexbox works and what we can do with it. Since Flexbox is an entire CSS module, it involves a whole set of properties that are meant to be applied to flex containers and flex items. Your Flexbox layouts will always have a flex container, like this one here, and at least a flex item, like these blue squares here, but you can have as much items as you wish, and you can also nest your layouts at your will. And this chance of having nested Flexbox layouts will be what will enable you to build even the most challenging and complex layouts with ease. At the first sight, if you take a look over all the content available in this page about the course content, you can get a little confused, or even a little scared because there are too much properties and values to learn about, but actually it is like riding your bicycle. Once you get it, you'll never forget it. And once you start using Flexbox, you'll never even consider to use any other approach to build your layouts. But before we dive into these properties, let's take an overview of the behind the scenes and understand how it works. Basically you have two axes that will define how the flex items will layout and how the space among them will be distributed. As we can see in this image, by default we have our main axes with horizontal orientation and our cross axes with a vertical one, but this can be changed using flex direction. Flex direction can assume four different values, which we'll see next, but the thing is that these values will define the main axes orientation and in which direction will flex items be laid out. And when we change the main axes orientation, we are also changing the orientation of the cross axes too. This will make a huge difference on the way you define the different properties that can be applied, both for your flex containers and flex items. Keep this in mind. Another important thing to notice is that all the items are always contained within the axes start and end points. And this applies both for the main and cross axes. As we can see in this image, we have here on the left the main axes start point and on the right the main axes end point. And the same happens for the cross axes where you have on the top the cross start point and at the bottom the end point. It is really important to you to get the basic concept of flex box axes and the chance of changing the orientation. Remember that they are always perpendicular and this will affect how and which rules you must add your CSS to get the desired results. Confused? Don't worry, you'll get it during the exercises that we'll do in this course. The best way to learn something is by doing it. And that's why in this course I'll teach you all there is to know about working with flex box through exercises. And these exercises will have these formats. First we have a brief description of a specific rule within flex box module. Then on the right side we'll have a preview of the layout that we want to build using this rule. Then down below we have an embedded planter with some CSS and HTML to build the layout that is shown up here. In each planter we have these files. The base CSS with some basic style for our layouts look a little prettier. The index HTML that has the markup that we need for our layout. And the style CSS that is the file that we would be working on to build our flexible layouts. In this exercise I want to talk to you about the display flex. As we can see here in this preview we want to build a layout where we have a container that has four items that are horizontally aligned. Down here we have two items that are vertically aligned. So to start we'll check our HTML code. Down here we have the flex container which is our parent. And we have two divs that are the items. So just to achieve the four items that are shown up here let's just add two additional elements with the number three and four. Now we just have to align them horizontally. Without using flexbox I would do something like adding a display inline block for each of the elements within its parent. And now we have our elements horizontally aligned. And if we want them to be aligned to the right we would have to add something like float right. Okay now they are aligned to the right side but they overflow its parent. So to fix that we have to add overflow hidden to the parent elements. Like so. Overflow hidden. Like so. And that's when the CSS daemons start to handle us. Now let's solve this using flexbox. Let's reset our styles. And as I said before I want to talk to you about the display flex. And voila we have our elements horizontally aligned just using display flex. And why does this work? Let's get back to our basics and terminology image up here. As I've said before by default our main axis is horizontally aligned. And this axis is who defines how our items will layout. When we are setting our display to flex we are saying okay now flex items should layout horizontally within its parent starting on the main start point and across start point. And that's exactly why it's happening here. Now our items are laid out horizontally across the main axis and according to the main axis start point and across axis start point. And that's the start of our journey. From the moment you have the magic display flex rule you can play with all other flexbox properties. Let's now play a little with the axis orientations. Okay, until now we have seen how to organize our items on both rows and columns changing the axis orientations and wrapping our content. But let's see now how to align flex items across the two existing axis. Let's start by the main axis. On the main axis we have justify content. Justify content is a flexbox property that enables us to distribute free space that is left between the flex items on the main axis. Which only happens when our flex items don't feel an entire row or column depending on your main axis orientation. This property can assume five different values. Flex start there is default value and that is specifies that items must be placed from the main axis start point to the main axis end point. That would be from the left to the right if you don't change your main axis orientation. Then we have flex end that specifies that flex items must be placed from the main axis end point to the main axis start point. That would be once more if you don't change your main axis orientation from the right to the left. Then we have center that as you might expect specifies that items must be placed at the center of the main axis. Besides these three values that are kind of obvious to need we have space between and space around. But space between specifies that items must be evenly distributed along the main axis. Where the first item must be placed at the main axis start point and the last item must be placed at the main axis end point and the rest of them evenly distributed along this axis. Space around is very similar to space between but this time all items have a space around them. Although you can notice a different space on the first and last items across the container edge as you can see here and here. What happens is that the space around two items don't merge which causes to be the double compared to the space on the edges. In this preview you can see that our flex items are vertically aligned. But how can we do this using justify content? Let's see. Before you see the solution please take your time, pause the video and try to figure out by yourself. Once you have done that then resume the video and let's find the solution together. So to start let's first try to apply these different possible values presented here on the flex container. To do that let's define justify content, let's start that is default value. Since this is the default value nothing happens. The result is exactly the same. Now let's try with flex end. Now our items are placed from the right to the left because our main axis end point is position right here and to the main axis start point is position right here. So items are being positioned from the end to the start point of the main axis. Now let's try center. Okay, now our items are at the center of the main axis. And what if we try with space between? Now our items are evenly distributed. If I try to add more items to the HTML here you'll see that they are evenly distributed. Okay, let's get back to our CSS and let's now try space around that is the only one that is left. Now our items are evenly distributed with a space around them. But as you can see we can't achieve the layout that we have seen on this preview here with none of these values. And that's because these items are vertically aligned and we are just aligning them horizontally. To solve this we have to change our main axis orientation to be vertical. Once you have done that we can use justify content to align our items across the main axis. And since the main axis will be vertically aligned we can vertically align our flex items. So let's try that. Let's for now delete justify content and specify the main axis orientation. For that let's specify flex direction column. Now our main axis is vertically aligned and we can play with our items alignment using justify content. Let's just specify a fixed height on our container just to see how our items are positioned when playing with justify content. Let's try with 300 pixels. And let's just delete some items and reset to have only two. And now we can play with justify content and see the behavior. So justify content and let's try to apply flex and. Now our items are positioned at the bottom of the flex container because our main axis vertically aligned and its start point is up here and its end point is down here. And remember flex and specify that items are placed from main axis end point to the main axis start point. So far so good. Now as you might be expecting me to do I only have to specify justify content center. Voila our items are vertical aligned at the center and that's how you align very easily items vertically using flex box. In this section we've seen how to align items on the main axis but it is also possible to do the same on the cross axis. Let's see how. So aligning items across the main axis is not a problem for you anymore. But we both know that aligning items horizontally is not one of our biggest problems. But aligning items vertically is. And if you don't change the main axis orientation to be vertical like we've seen before we can't align our items vertically through justify content. For that we have align items property instead. This property is very similar to justify content but in this case it applies to cross axis instead of the main. It can assume 5 different values too and most of them are the same that we can apply to justify content like you can see here with flex start flex end and center. Which flex start says is ok align my items from the cross axis start point to the cross axis end point that if you don't change your axis orientation would be from the top to the bottom. And flex end says that items must be placed from the axis end point to the axis start point that would be from the bottom to the top. And we have center that basically says ok place my items at the middle of the axis. But besides these three values that we already know when we've seen justify content we have baseline and stretched and stretch is the default value. Don't you ever have that problem where you have multiple columns side by side and you need them to have the same height. A solution that I am used to see and I don't appreciate too much is that you can define fixed height for all of them and problem solved. But most of the time you have to define your items height according to the highest item on your layout and that's exactly what stretch says. What stretch says is that ok on each line of my flex layout define a height that is equal for all items and this height is defined by the highest item on each line. Let's see this plunky here to see what I am saying. As you can see here I have a display flex for my end my container and I have a flex wrap just to have multiple lines. And as you can see the first line is higher than the second one because this item here has a line height that is different from the other items. So if I define here aligned items stretched nothing happens the result is exactly the same all of them have the same height. Now if I change it to be flex start for instance now my items have different heights but they are aligned from the top to the bottom. And if I change it to flex end you have the same behavior but this time from the bottom to the top. And center as you might expect will place our items at center as you can see here. Now what happens with baseline with baseline we are saying that our items must be placed according to the baseline of each item. In this case we have this item that has a line height of 50 pixels. And because of this the baseline of this child here is right here below this text. And that makes all the items on that line to align according to this baseline here. If I change line height of this item you'll see that all the remaining items will follow this baseline alignment. Let's try to do it by changing it to 30 pixels. As you can see all items are following the baseline here. Honestly baseline is a value that I never used before but it is interesting to know it anyway. Someday you might need it who knows. And we're down about flex items alignment we've seen how to align items vertically and horizontally on each line of our flex layouts. Let's see now how to manage the alignment of each line on our layouts. Hey, so about flex shrink well honestly not much to talk about this property. This is one of those that I never used until today. But it's worth to know it. Do you remember when I first said that if you didn't use flex wrap your items would shrink as much as possible to fill all of them into a single line. That's thanks to flex shrink default value. By default flex shrink has the value of 1 which means that each item must shrink when needed. The possible values for flex shrink are 1 and 0 which basically defines whether flex items should shrink or not. As we can see in these examples none of these items are shrinking. That's why the items are overflowing its parent. Let's try to reproduce this in this plunker. Let's define that all these items should shrink except for the first one. For that we just have to add a selector of first child and say flex shrink 0. Now notice that all the items are shrinking except for the first one. And if we define that none of the flex items should shrink which will happen is that none of the items will shrink what causes them to overflow its parent. As I said I never needed this property but it can be useful someday. We are almost done. Let's see if flex base is to finish all the content about flex box.