Flexbox — Week 2: Positioning Items, Flex, Aligning Items, Flex-Direction, and Wrapping

Now that we have our basics covered and we know how to justify our content, it’s time to move on to the next lesson in the course — positioning items along the main axis. As it stands in our code, we currently have the content justified with space-around, which distributes the items evenly:

However, for this exercise we want to have the Home and Search buttons to the left and the logout button to the right, mimicking a popular choice amongst websites. First, we need to remove our justify-content, which will result in all of the buttons being squished together on the left. Then, we give the divs that currently represent our buttons a class name so we can work with them individually — home would have a class of home, etc. In our CSS, we will then give the class we want on the right (logout in this case) margin-left: auto which will give us the layout we want.

It is important to make sure you use margin-left and not just margin, otherwise, it will not go all the way over to the end!

The next lesson is about the all-important flex property. The flex property is so important because it allows us to create responsive elements. To do have our three buttons fill the width of the container, we will get rid of the margin-left code from our last exercise and instead give our container and all of its children (in this case, divs) flex: 1;. This tells them to take up an equal amount of space (1/3 of the total container each, since there are three of them) and they will change in size if we resize our window and therefore the container:

Another way you could handle this is by calculating the percentage width for each item and setting width to that number. But flex makes it easy and takes out that math, leaving less room for error and more room for adding and removing elements easily.

After learning about the flex property, it’s time to move on to learning about how to align items. For this exercise, it is key to mention that in our CSS we already have assigned a height of 100% to our HTML and body elements. This will impact how what we add next works, so if you’re coding along it’s important to know that! The axis we are aligning our items on in this case is the up-and-down axis. So when we set our value to flex-start it will be at the top (or the start) of the axis, and flex-end will be at the bottom (or end). center is also an option great for, you guessed it, centering items. The exercise we were given was to isolate the “Home” button by putting it in the bottom left corner while the others remained centered. To do this, I assigned a value of center to align-items in the CSS controlling the container that holds all of the button divs. Then I added additional CSS to just the home div using align-self and giving it the value that places items in the bottom: flex-end.

Next, we learned about the flex-direction: column. Previously, we have been working with items that are all set horizontally along a row. But that isn’t what we will always need! When we update our CSS to include flex-direction: column, it will go from a horizontal list to a vertical one like so:

For the last unit in this week’s practice, we covered wrapping. Flexbox has a property called flex-wrap that is set to nowrap by default. What this means is that you can only have one row or column along your main axis. However, when this is toggled to wrap it allows us to wrap, or spill over into additional rows/columns when there isn’t enough room for it. This is especially important for responsive design!