Web Development➝How to remember the flexbox alignment properties

If you've used flexbox, the powerful layout mechanism in CSS, you may have found yourself occasionally mixed up trying to remember the correct property names, I know I have. In particular, the properties pertaining to alignment and distribution – justify-content, align-items and align-content – always caused me some trouble. I'll explain why I found them confusing, and hopefully this will help you to remember them correctly too.

The garden path

Let's first look at a couple of dictionary definitions you are probably familiar with:

justify:

Adjust (a line of type or piece of text) so that the print fills a space evenly or forms a straight edge at the margin

align:

Place or arrange (things) in a straight line

It's natural to try and apply these definitions to understand the meaning of the flexbox properties. But this will lead you up the garden path – it looks good to start with but then suddenly stops making sense. Let's have a look at the three properties I mentioned above to see how this happens.

justify-content

Here's what the specification has to say about this property:

The justify-content property aligns flex items along the main axis of the current line of the flex container. … Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

This seems to fit with the dictionary definition of justify, i.e. adjusting the distribution of items along the main axis. So, feeling comfortable in our interpretation we move on to the next property.

align-items

Again, from the specification for this property we have:

Flex items can be aligned in the cross axis of the current line of the flex container. … align-items sets the default alignment for all of the flex container’s items

This also fits with the dictionary definition of align, i.e. moving the items in the cross axis to achieve a desired line up along the main axis. It's all beginning to make sense, no? But you shouldn't get too comfortable with this. The first sign that something is amiss with our interpretation is that this property uses “items”, but the previous one used “content”, we'll get back to that in a minute.

align-content

We now meet our third property, about which the specification tells us:

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Oh! What? This fits a lot better with the dictionary definition of justify does it not? And indeed, this property can take all the same values (plus stretch) that justify-content could take. So, what's going on? Why is this property not called justify?

Justification

The flexbox alignment properties are part of a bigger picture, which has its own specification, the CSS box alignment specification. This specification takes the CSS alignment behaviour of flexbox and generalizes it to be utilised across various other layout models.

If you read through this specification you'll find the following comment.

Note: This specification uses the terms “justify” and “align” to distinguish between alignment in the inline and stacking dimensions, respectively. The choice is somewhat arbitrary, but having the two terms allows for a consistent naming scheme that works across all of CSS’s layout models.

So justify and align actually have nothing to do with their dictionary definitions, they are not distinguishing the type of alignment, they are merely for distinguishing directions of alignment. Bringing this back to flexbox layouts, “justify” means you're moving things in the main axis direction whereas “align” means you're moving things in the cross axis direction.

So what is it that distinguishes the different layout behaviours? Well, it's actually the “content” vs “items” difference we noticed earlier.

*-content properties are for arranging the content with respect to their container. You can think of content as all the items treated as a whole. Thus, aligning content consists of things such as choosing the space around and between items in order to achieve a specific alignment with respect to their container. That's pretty much what we originally thought justify meant.

*-items properties can be thought of as defining how items should line up with each other. That's what we originally thought align meant. The specification doesn't word it quite like this, but I think this interpretation works quite well. I should note that this property sets the default alignment for each item, you can actually specify a specific alignment on the item itself using the corresponding *-self property.

So it all makes sense in the end, I hope! To help you out here's an alignment properties cheat sheet: