Flexbox is one of the display properties and it makes single dimensional layout super easy. A good front-end developer should be familiar with this technology.
- Flexbox is one of the display properties and it makes single dimensional layouts super easy. A good frontend developer should be familiar with this technology, and comfortable with how it works. So let's take a look at how it's used to control horizontal alignment, and then practice that with an example that you may be asked to build during a coding test. So Flexbox is one of the available CSS display properties. There are several of them and this is just one of them, it's perfect for laying out simple dimensional content.
There's a separate property called CSS Grid that is more complex for layouts but it doesn't have great browser support. Now although Flexbox has good browser support, depending on what browsers you're targeting, the syntax can get a little bit complex because it's different for different versions of Internet Explorer. So you should use something like PostCSS to manage the conversion to the different versions of the syntax, depending on which browsers you're supporting. Now working with Flexbox is pretty easy, you specify the display property on a parent element, and then you can control how a child element will display within that parent.
Most of the time you'll be adding additional properties in the parent, to control how the children are displayed. There are some additional properties that you can use, to control how individual children within the parent container work, so if you want, for example, a single children to behave differently, you can add additional properties on the children. But 90% of the time, you'll be working in the parent property. So we're going to focus in this code example on horizontal alignment. If you do understand horizontal alignment chances are that vertical alignment will be pretty easy and you'll probably already know how to use it because it's pretty much some of the same stuff.
So the main thing you have to do is use the display flex property, to set up a parent as a flex element and then all of the children will start behaving as a flex component. Once you establish the parent container as a Flexbox component, you can specify how elements inside will flow. You can choose that the elements behave as rows, which is the default, and that means that those elements will display side by side. This is sort of like floating elements. The other option is to stack children on top of one another in columns.
There's also options to reverse the order of rows and columns, so that they show up in reverse. Now flex children will try to stay in a single line, but you can change that so that items will wrap or not wrap, and also reverse the order of the items. Finally, you can use the justify content property to control how the elements are aligned within the main axis. Now the default is for them to be left aligned and that property's called flex start. But you can easily right align them with flex end.
Flexbox also allows you to center elements which is one of the easiest ways of centering content. There is also a couple of ways that you can space element, space between places the content that's at the beginning or the end of the parent, at the edges of the container, and space around puts equal space between all the elements as well as in the edges. So let's take a look at how we would do a navigation, which I've set up right here, as a Flexbox element, so this navigation is all set up, and it's already set to be a little bit responsive, you can see that I'm setting some media query breakpoints right here, and if we look at the HTML, you'll see that it's very simple navigation.
We've got a nav with a class of nav right here, then inside that we have a container. We usually do that just to make sure that the container is a certain width so in our case, we're going to make this sort of be no wider than 1200 pixels. And then we have a section called navbar, this is going to be our flex component, and each of the items inside are a series of anchor tags which will be the children. So right now we don't have this set up to be flex, but we do have some basic styles in here.
And what we need to do is, add another class right here, so we'll do a class of nav. And we're targeting the navbar and, the first thing we wanted to do here is set this up as a display of flex. So once we do that, you're going to see that the element appears side by side, and by default Flexbox is going to try to leave everything in a single line so this isn't really breaking onto a separate line, and it's left aligning the content.
So, we can change the sort of stacking order of these elements by modifying or adding another property here. So we can use flex direction, and set this to be a column, the default is row, and now all the elements will stack on top of one another. So, you can very easily set up a responsive menu by controlling when these things happen. So for example I can add a media query right here, so I'll say media all and I'll use bandwidth of 600 pixels.
And then in here I'm going to change the flex direction to be row, so this is going to set up a different relationship at 600 pixels. So right now by default, we'll set this up as columns, which is sort of the smaller device view, and when we go to a bigger size, these will be set up as rows which is the default. There's no alignment that's happening between these elements, so we can easily fix that by adding a justify content property, so let's do that.
So we'll say justify content, and we have a lot of different options here. The default, as I mentioned, is going to be flex start. And if we want to though, we change that to flex end, so that will align everything to the end, so let's go ahead and make this a lot wider so you can see that everything now is right aligned when I do flex end. I could also do center, which is one of the easiest ways of centering content. It's really tough to get navigation at the center, but this kind of makes it super easy.
And then we can also do two different spacing properties, and so we can do either space between, and this will sort of distribute the space between the elements, and we can also do space around which, that's the same thing except that it's going to add a little bit of extra padding at the end so they're not going to look very different, unless you had some sort of background right here. But you can see that making a responsive navigation is super easy with Flexbox, there's only a few classes that you have to add.
As I mentioned, doing any sort of vertical spacing is pretty similar, you're going to be working with different properties, and this is what makes Flexbox such a joy to work with. Things that used to be extremely hard to do with regular CSS become super easy when you have simple layouts. Now Flexbox is pretty complicated and full of options, but if you understand the basic layout like the one we've done here, it's pretty easy to pick up the rest. So here are some additional resources and courses that you should check out. Also if you want to share with me some questions you've been asked or have asked in interviews, connect with me in Linkedin or just about any other social media network, like Twitter or Github, @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.