CSS Word Soup: align, self, and justify items and content
Published: 2023-07-20 17:53:41

###### 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 my<em>self</em> some MDN skimming. From today on, I will have no excuse to _justify_ any mis<em>align</em>ed 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[^1] 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[^2]. 

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`.|
 


 

### More on this topic
- [In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties)
- [What's the difference between align-content and align-items?](https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items)
- [In CSS Flexbox why are there no justify-items and justify-self properties (different article)](https://saturncloud.io/blog/in-css-flexbox-why-are-there-no-justifyitems-and-justifyself-properties/)


[^1]: If `flex-direction` is set to `column`, the axes exchange their orientation (the main axis will be horizontal and the cross-axis vertical).
[^2]: There is no such thing as a `grid-direction` property in Grid. So, properties beginning with `justify` always apply to the horizontal axis, and the ones starting with `align` always affect the vertical axis.