[csswg-drafts] [css-flexbox-1] Proposal: add flex-direction-based aliases for the align/justify-* props (#6514)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox-1] Proposal: add flex-direction-based aliases for the align/justify-* props ==
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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6514 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 12 August 2021 17:39:10 UTC