[css-align] *-items properties might need to resolve directions early · Issue #7612 · w3c/csswg-drafts (original) (raw)

Currently, the *-items properties are extremely simple - aside from the legacy keyword doing some magic, their keywords are left completely uninterpreted. The *-self properties then, as their auto behavior, grab the *-items value from their parent element, and interpret them appropriately - resolving logical values against the element's writing mode, etc.

Per @bfgeek, this might not match author expectations, and might end up not being web compatible. Chrome received a bug about this, where an author wrote align-items on a column flexbox (which corresponds to the horizontal axis), and expected it to horizontally align a positioned child. Per spec, this won't work - the positioned child will take the parent's align-items value as its align-self value, but its align-self property operates in its containing block's block axis, which in this case is vertical.

Ian's suggestion is that we do direction resolution on the *-items properties, producing a pair of physical positions, and then the *-self properties take their auto values from the pair, grabbing from the pair according to their own axis

So in the example above, the column flexbox (with align-items: flex-end and a default justify-items: normal) would produce a horizontal alignment of "right", and a vertical alignment of "normal". Then the positioned child, with both of its -self properties being auto, would take an align-self of "normal" (because its align- axis is vertical) and a justify-self of "end" (the logical direction corresponding to horizontal right).