CSS Word Soup: align, self, and justify items and content

Every time I use Flexbox or Grid, I end up mixing—and messing—my spacing properties. Enough is enough! I decided to put together this post to save myself some MDN skimming. From today on, I will have no excuse to justify any misaligned element!

Flexbox

In the case of Flexbox, the names for the properties that control alignment across the main and cross axes begin with justify and align, respectively. However, the second part of the property name is different for each axis. Flex items are organized horizontally¹ with justify-content, while align-items controls the vertical organization. There is also align-self, which allows an element to override its assigned align-items and align itself along the vertical axis independently from other elements inside the same container. An important caveat is that align-self will be ignored when margin for the element is set to auto.

Things start to get a bit tricky when we want to have an item override its assigned placement on the horizontal axis in the same way align-self does for the vertical axis. In this case, you may think that justify-self is a thing in Flexbox, but as it turns out, it isn’t! The way to accomplish that effect is no other than the good old margin property. Try to use justify-self inside a flex container and you will quickly realize that the property is ignored altogether. The same goes for justify-items, a property used in Grid and block-level layouts but ignored in the context of a flex container.

Last, there is align-content. The property does have an effect in Flexbox but only when flex-wrap is set to wrap or wrap-reverse. In those cases, align-content controls the vertical distribution and spacing of the wrapped lines of elements. If flex-wrap is not set (the default value is nowrap), a browser will ignore align-content for that specific container.

For the case my future self does not have the time to read through the above explanation, here is a handy table compiled from MDN's CSS pages:

Flexbox Property	What It Does
`justify-content`	Controls how the browser distributes space between and around items along the main axis.
`align-items`	Controls the alignment of items on the cross-axis. Another way to think about it: sets the `align-self` value on all the container's direct children as a group.
`align-self`	Overrides a flex item's `align-items` value. This item will be independently aligned on the cross-axis. Important: if a flexbox item's cross-axis `margin` is `auto`, then `align-self` is ignored.
`align-content`	Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. This property does not affect single-line flex containers (i.e. ones with `flex-wrap: nowrap`).
`justify-items`	This property is ignored in Flexbox.
`justify-self`	This property is ignored in Flexbox.

Grid

Now onto Grid!

Contrary to the case with Flex, all six properties discussed above have an application in Grid. The naming of properties in the Grid model is more consistent with how they work, making it easier to understand their proper use.

The properties ending in -content apply to the grid container (content -> container!). The names work similarly to the way they do in Flexbox when the flex-direction is set to row: justify-content applies to the spacing and positioning of the grid cells on the main axis, and align-content does the same for the cross axis².

The pair of properties ending in -items also apply to the grid containers. However, they control spacing for the elements inside the grid cells.

Finally (finally!) the pair of properties ending in -self apply —very appropriately— not to the grid container but to individual grid items. It allows them to override the -items property set for their container and choose their own alignment.

As with Flexbox, here is a little table of the properties and their effect:

Flexbox Property	What It Does
`justify-content`	Applies to the grid container. Controls the alignment of grid items along the main axis.
`align-content`	Applies to the grid container.Controls the alignment of grid lines along the cross-axis.
`justify-items`	Applies to the grid container. Controls the alignment of grid items along the main axis within each grid cell. Sets the default alignment for all grid items in the container.
`align-items`	Applies to the grid container. Controls the alignment of grid items along the cross-axis within each grid cell. Sets the default alignment for all grid items in the container.
`justify-self`	Applies to grid items. Controls the alignment of a specific grid item along the main axis within its grid, allowing it to override the alignment set by `justify-items`.
`align-self`	Applies to grid items. Controls the alignment of a specific grid item along the cross-axis within its grid, allowing it to override the alignment set by `align-items`.