This is an exploratory suggestion; not sure if it's something to actually go for, but wanna talk about it.

So, our (Chrome's) devrel have been doing some surveys about CSS usability in various aspects. Recently they were asking about Flex and the effects of having shipped 'gap' for it. (Spoiler: people like it.)

A persistent complaint showed up in the survey, however - a lot of people are confused by the justify/align-* properties, at least as applied to Flexbox. As far as we can tell, these properties aren't particularly confusing in Grid. The best we can figure is that people are able to handle the properties when they're mapped to the logical directions (which can, for the most part, be treated as physical directions), but they're confused by mapping them to flex directions. The fact that Flexbox uses a different subset of the properties in each axis (all three align-* props, but only one of the justify-* props) might also be leading to the confusion - Grid uses all three in both.

(Quick aside: I think the emphasis on flex-relative directions in flexbox was a Big Mistake in the spec. Were I doing it again today I would absolutely make a lot of flexbox just rely on existing properties/directions, like just using width/height instead inventing flex-basis.)

We've been thinking over this, and a possible fix is to add aliases to the properties that are explicitly flexbox-focused (and, presumably, only work for flex layout?):

• align-content could be aliased as pack-lines
• justify-content could be aliased as main-align
• align-items could be aliased as cross-align
• (align-self left as-is?)

Adding these aliases would only be useful if they were usable cross-browser, else they would likely just lead to even more confusion; if we did something like this, then, we'd want cross-browser agreement and an attempt to ship roughly simultaneously.

Thoughts?