CSS Flexbox Explained — Justify Content
One of the most frustrating things for me when I started building web apps in Javascript and even Ruby on Rails was positioning my data where I wanted it to be in my app. How do you center something vertically, horizontally, between other elements? Why is that element centered but this one isn’t? Trial and error is a valid learning process, especially for the visual results of CSS, but if what you try repeatedly doesn’t work it can be frustrating. My background in graphic design may have added to my irritation; being able to picture what I want in my head and not being able to implement it was maddening. I’m not only talking about centering, alignment is also important, if one paragraph or image is 20 px to the right or left of the element above it I can’t ignore it. I know I could just manually add or subtract some pixels from the position of the elements I want but I can’t help but feel like this is hard coding and there should be a better solution. Then I found out about flexbox and after learning a little bit about it I’m going to attempt to explain it to you and how it can help you with your design.
The first thing you need to get started with flexbox is a container, this container allows you to use flex context on all of its direct children (one level down within the markup structure). Very simple, take a look at the example below.
.container {
display: flex;
}
Now that the container is set up lets explore some of the things we can do within that container using the power of flex.
Flex-direction
Flex-direction establishes direction flex items are placed within the container. There are row and column which arrange items from left to right (row) and top to bottom (column). Each of these has an opposite, row-reverse and column-reverse, that reverses the order of arrangement. Flex-direction is set to row by default so unless you want to change it you don’t need to assign it.
Justify content
I’m going to cover this first because I think it’s the easiest to understand and this might be all you really need to achieve your desired aesthetic outcome. Justifying content handles where it lies on the horizontal axis, it move things to the left, right, center, or handles the distribution of space around items.
Flex-start
This is the default setting, if nothing is declared the content will follow the flex-start rules. Flex-start arranges items as far left of the container as they can go. This will happen until there is no more space left in the line in which case the overflow will begin on a new line and follow the same rules.
Flex-end
This is the opposite of flex-start, items are as far to the right as they can go, within the container. The order of the items remains unchanged, the first item is still leftmost, remember flex-direction. The only difference is that the items are forced to the righ.
Center
This centers the items in the container along the line, which seems simple and self explanatory, which is good. But centering things when I started was one of the hardest things for me to understand. Don’t forget the container and item relationship, if your item isn’t centering make sure that it’s in a container that has display: flex;.
.container {
display: flex;
}.center-me {
justify-content: center;
}
Space-between
Ok Dave Matthews, this moves the first item to the start of the line, the last item to the end of the line, then evenly distributes the remaining space between the items. To break it down further, with a default row and column, the first item will be on the left edge of the container, the last item will be on the right edge of the container, and the rest of the items will have an equal distribution of space between them.
Space-around
This will distribute an equal amount of space around each item. Read that again carefully, equal amount around each item. That means each item gets the same amount of space to its left and right.
Space-evenly
An equal amount of space is distributed between each item as well as the edge of the container. So there is an equal amount of space between the left edge of the line, the first item, any subsequent items, and the right edge of the line.
I hoped this helped you understand the power of flexbox and some of the mechanics behind it. It’s a really useful tool to add to your CSS toolbox, it can fulfill a lot of your positioning and spacing needs. Since this blog was focused on the horizontal distribution of items within a flexbox container my next blog will be about vertical distribution, so stay tuned. If you have any questions feel free to connect with me on LinkedIn.
