The WG resolved to go with Option D based on a straw poll in a telcon: justify-self/content/items and align-self/content/items.
Fundamentally, we're breaking down the properties along two axes:
We're going with 'justify' vs. 'align' to distinguish X vs. Y, but still need a scheme for A/B/C
What naming scheme do we use to indicate various alignment targets?
If we don't have a clear consensus, we can pick something now and leave it open as an LC issue to give us more time.
Set 1: Box/Content/Default
+--------X----------------Y------ A | box-justify box-align B | content-justify content-align C | default-justify default-align
Set 2: Self/Content/Item
+--------X----------------Y------ A | self-justify self-align B | content-justify content-align C | item-justify item-align
Set 3: Outside/Inside/Items
+--------X----------------Y------ A | justify-outside align-outside B | justify-inside align-inside C | justify-items align-items
Added after initial discussions…
Set 4: Self/Content/Items Inversion
+--------X----------------Y------ A | justify-self align-self B | justify-content align-content C | justify-items align-items
Set 5: Self/Content/Items Inline/Stack
+--------X----------------Y------ A | align-self-inline align-self-stack B | align-content-inline align-content-stack C | align-items-inline align-items-stack
For me, Set 1 is too abstract. (Which box? Which default?) I like self/content/item because I find it very self-descriptive. I like outside/inside/items because it will match nicely with our future display-inside and display-outside. I wouldn't have trouble remembering and applying the property names in Set 2 or Set 3.
box and content make sense to me, and so do outside and inside. self and content are a bit cryptic to me. As for default vs item, no strong opinion. Neither seem very much clearer than the other.
outer-align; outer-justify; inner-align; inner-justify; child-outer-align; child-outer-justify; However, I'm not completely sold to "child-outer-align" and "child-outer-justify". This case is better solved with a pseudo-class.
[Set 3] is my favorite. For one, I value the swapped ordering. Having "justify" and "align" come first makes more sense to me, given our general rules for how alignment works. It also puts us slightly farther away from the existing text/vertical-align properties, which is good. For two, outside/inside is very difficult to confuse, especially as we introduce more things using the inside/outside pair.
[Set 3] is my choice as well. Grouping these related properties together with justify and align coming first makes the most sense to me. I vastly prefer items [over default], as that conveys to me a group of discrete things to distribute. And I have a slight preference for inside/outside over self/content. I do not think 'box' should be used - it's too overloaded as a term. So I think this should be the easiest set to explain to someone new to the concepts.
I'm actually not so happy about the *-outside terms here. The display-outside/inside distinction is about two halves of the same thing; here' align-outside and align-items are about the same behavior, on different things.
The “Inversion” row makes some sense, because ‘justify-box’/‘align-box’ sound like English phrases in the imperative mood, whereas ‘box-justify’/ ‘box-align’ sound odder (to me as a non-native speaker) than ‘box-justification’/‘box-alignment’. ‘default-*’ seems just wrong, not least because of the ‘default’ keyword. I think ‘box’ and ‘content’ are good terms and without doing further reading (and thinking), I’m not sure why we need to be able to specify the default box alignment for items. Regarding ‘outside’ and ‘inside’ (or maybe ‘outer’ and ‘inner’) I think the latter as proposed doesn’t match my mental model, which makes me prefer +--------X--------------Y-------- A | justify-outside align-outside B | justify[-self] align[-self] C | justify-inside align-inside
The align- and justify- prefixes are confusing to me too, especially the latter. However, I understand the concerns against using "horizontal" and "vertical" in the name. How about using the axes in the naming? i.e. inline-align-* and stacking-align-* (the latter could just be align-*). I also find "-inside" and "-outside" unintuitive. self/content sounds the most straightforward to me. inside/outside can mean a number of different things (align the element based on the outside? Align what's outside the element? Something else?) but self/content are not as prone to misinterpretation. Of course, introducing more inside/outside pairs in CSS helps, by forming a convention, but it does not change the fact that it's incomprehensible without that convention, which needs to be learned. However, opinions (even justified ones) are pointless when the problem is basically a usability issue (naming is to languages/ APIs what UI is to applications). You need to conduct some sort of usability test [...]
I think I'm leaning towards [Set 4] myself, since it seems to fit reasonably well with the flexbox model: Set on flex container: align-content - to set distribution of flex lines justify-content - to set distribution of items in each flex line align-items - to set (default) cross-position of items Set on flex item: align-self - to set individual cross-position of item
If you want to keep consistency with other CSS properties (border, background-position, ...) the axis should be at the end of the property name and there should be a shorthand to modify both axises.