This was asked on the www-style list, and Tab Atkins (spec editor) provided an answer explaining why. I'll elaborate on that a bit here.
To start out, let's initially assume our flex container is single-line (flex-wrap: nowrap
). In this case, there's clearly an alignment difference between the main axis and the cross axis -- there are multiple items stacked in the main axis, but only one item stacked in the cross axis. So it makes sense to have a customizeable-per-item "align-self" in the cross axis (since each item is aligned separately, on its own), whereas it doesn't make sense in the main axis (since there, the items are aligned collectively).
For multi-line flexbox, the same logic applies to each "flex line". In a given line, items are aligned individually in the cross axis (since there's only one item per line, in the cross axis), vs. collectively in the main axis.
Here's another way of phrasing it: so, all of the *-self
and *-content
properties are about how to distribute extra space around things. But the key difference is that the *-self
versions are for cases where there's only a single thing in that axis, and the *-content
versions are for when there are potentially many things in that axis. The one-thing vs. many-things scenarios are different types of problems, and so they have different types of options available -- for example, the space-around
/ space-between
values make sense for *-content
, but not for *-self
.
SO: In a flexbox's main axis, there are many things to distribute space around. So a *-content
property makes sense there, but not a *-self
property.
In contrast, in the cross axis, we have both a *-self
and a *-content
property. One determines how we'll distribute space around the many flex lines (align-content
), whereas the other (align-self
) determines how to distribute space around individual flex items in the cross axis, within a given flex line.
(I'm ignoring *-items
properties here, since they simply establish defaults for *-self
.)