Flexbox — Week 1: Basics, Display, Flex-Direction, and Justify-Content

This week, I decided to take a break from my Instagram clone tutorial. I had a technical interview this week with a focus on front-end development. During it, I realized that I could use some additional practice with flexbox. To do so, I picked up this course to gain a better understanding of how and when to use it.

The tutorial gives us some basic styling, where our page initially looks like this:

One of the first things mentioned is the importance of containers and their items. Flexbox is built around the concept of these containers and elements that are direct children of them. In this case, we have a nav class named container as our container and divs with text (home, search, and logout) and its children.

The first exercise in the tutorial has us add a display property of flex to the container nav. This takes the vertical stacking we see above and lines them up horizontally:

Next, we learned about the concept of the main axis and cross axis. This is a key part of how flexbox works, and I think this is a concept I did not fully understand prior to this tutorial. A flexbox will always have a direction, and by default it will be horizontal and goes from left to right, which is why we see our home div as the first element. The direction can be changed in the css using flex-direction. If we were to give it a flex-direction of row we would not see a difference as that is what we already have in this particular instance. However, if we were to change it to column, it would stack them vertically like so:

For the sake of the exercises, we will keep it with our default row direction as it is more practical for the kinds of site grids we will be building.

Next, we moved into learning how to position items along the main axis. In this case, we are mostly doing this so that our items are not all squished together to one side. To do this, we will use a property called justify-content. There are a few values to choose from for this property, so it is important to choose the one that fits the needs of your site. In this case, our goal is to not have the items squished together and to give them space. The value that best handles behavior like that is space-around which does exactly what it sounds like — puts space around each item.